使用scss或less（包括在vue中使用）

一：安装ruby

https://rubyinstaller.org/downloads/

安装步骤：https://www.sass.hk/install/

注：添加国内淘宝源使用

gem sources -ahttps://gems.ruby-china.com/

二：Hbuilder中配置

注：HbuilderX配置参考（点击）

1.工具栏中依次选择：工具—预编译器设置

​​​​

2.如果设置中有sass,scss选项，则点击编辑；如果没有就新增一个

3.只需要根据实际需求更改图片中的两个红框中的信息即可

其中：第一个红框是sass.bat的文件位置 默认在ruby安装位置中bin目录下
第二个红框是生成的css文件位置、命名方式及风格，直接复制下面这行文本即可

--no-cache %FileName% ../css/%FileBaseName%.css --style expanded

禁止生成css.map文件加入：–sourcemap=none

--no-cache %FileName% ../css/%FileBaseName%.css --style expanded --sourcemap=none

结尾的 –style compact是编译风格 有四个选项：

nested	expanded	compact	compressed
默认	展开输出	紧凑输出	压缩输出

nested是默认的。风格区别参见开头sass安装链接中的文档。
两个红框信息填写完成后点击确定即可。
这时你在你的scss文件中ctrl+s保存时，会在同级目录下生成一个同名css文件。每次保存时都会更新。省去了手动编译的麻烦。
执行保存操作后在同级文件夹中生成同名css文件

Less

01.全局安装less

npm install -g less

//自定义函数插件，按需求安装

cnpm i less-plugin-functions -g

02.在hbuider中使用

触发命令地址，安装less地址

例：D:\nodejs\node_global\lessc.cmd

命令参数：

%FileName% %FileBaseName%.css

03.确定，开始使用

---

在vue中使用scss或less

01.

cnpm install sass-loader node-sass --save-dev

如使用less，把scss换成less就可以了
注：scss不生效可能是版本过高导致，版本建议7.3.1

npm uninstall sass-loader
npm install sass-loader@7.3.1 --save-dev

或直接打开我们的package.json，修改sass-loader的版本为7.3.1
重新安装依赖文件
npm install
然后，启动项目
npm run dev

Error:Node Sass version 5.0.0 is incompatible with ^4.x 问题解决
此错误来自sass-loader.因为node-sass@latest为v5.0.0,而sass-loader期望值为^4.0.0
目前解决方案如下：

//卸载 node-sass
npm uninstall node-sass
//然后安装最新版本（5.0之前）
npm install node-sass@4.14.1

02.

<style scoped lang="scss"></style>

03.可以使用啦…

注：在webpack.config.js中不需要配置使用sass-loader，因为vue-loader会自动解析