HBuilder X 配置sass/scss

在工具栏上，找到工具–》插件安装–》插件市场–》搜索sass，步骤如下图所示：

这两种方法选择一种安装插件即可，安装完记得重启hBuilderX软件
接下来在工具–》插件配置–》选择sass插件的–》package.json文件进行编辑
只需修改key(快捷键)和把"onDidSaveExecution"的值改为true，保存即可

接下就可以进行写sass/scss文件了。
可能有些朋友跟我一样，出现了以下的错误提示：

[编译scss/sass] 15:56:14.903 [0;31m--> LibSass 的二进制文件(G:\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-64\binding.node)缺失，请执行下面3条命令下载对应版本的二进制文件：（有可能引发此错误的原因是 Node 版本变更）[0m
[编译scss/sass] 15:56:14.903   mkdir -p G:\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-64
[编译scss/sass] 15:56:14.903   cd G:\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-64
[编译scss/sass] 15:56:14.903   curl -o binding.node http://cdn.npm.taobao.org/dist/node-sass/v4.7.2/win32-x64-64_binding.node
[编译scss/sass] 15:56:14.903 [0;31m--> MacOS 、Unix/Linux 请根据权限使用 sudo [0m

错误原因：
由于G:\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-64\binding.node文件的版本不对，导致出现报错
解决方法：
使用以下命令查看对应的版本，然后到https://github.com/sass/node-sass/releases下载对应的版本，注意需要把文件名称修改成binding.node，把下载的文件放到出错原因的目录下。
在Windows下的命令行模式下输入以下命令，查看

node -p "[process.platform, process.arch, process.versions.modules].join('-')"

然后重启一下这个软件即可。

引用博友文章:

https://blog.csdn.net/you23hai45/article/details/86236769

第一次写，有什么不到位的地方请各位博友见谅见谅！

HBuilder X 配置sass/scss相关推荐

vue-cli 3.0集成sass/scss到vue项目
尝鲜使用vue-cli 3.0.0-beta.6,很容易就可以完成scss到vue项目中. vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass 手动安装sass- ...
在webstorm中配置sass的自动编译，并且可以指定编译后的css的目录.
参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing 链接:https://www.jianshu.com/p/0fe52f149cab ...
webstorm 配置sass
在配置的过程中,踩下的一些坑.在这里不介绍安装ruby,网上一搜一大堆. 第一步:打开Settings,快捷键:Ctrl + Alt + S.在搜索框搜索 File Watches,或者在Tools ...
vue cli3 配置sass全局变量设置不生效，sass混合器文件全局引入
vue cli3 配置sass全局变量的问题首先确保依赖安装完整找到vue.config.js加入配置信息首先确保依赖安装完整 1.node-sass 2.sass-loader 3.style ...
一、SASS(SCSS)
文章目录一.为什么有出现css预处理器二.css预处理器(Sass/Scss.Less......)是什么? 三.Sass和Scss的关系四.配置Sass编译环境五.Sass语法拓展 5.1 ...
Webpack: CSS 到 Sass/Scss 与 CSS Module
Webpack: CSS 到 Sass/Scss 与 CSS Module 文章目录 Webpack: CSS 到 Sass/Scss 与 CSS Module 前言正文 1. 在 JS 中引入 C ...
【Sass/SCSS】我花4小时整理了的Sass的函数
[Sass/SCSS]我花4小时整理了的Sass的函数博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 Sass 定义了各 ...
css预处理器sass/scss入门
sass/scss入门一.css预处理器是什么? 二.为什么要用css预处理器? 三.sass.less.stylus的区别? 四.sass与scss 五.sass安装六.sass常见用法 6.1 ...
sass/lsee 转换css 网站 SASS 转 CSS 工具，在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
sass/lsee 转换css 网站 SASS 转 CSS 工具,在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具

HBuilder X 配置sass/scss

HBuilder X 配置sass/scss

HBuilder X 配置sass/scss相关推荐

最新文章

热门文章