一：在vue中使用
01.npm install sass-loader node-sass --save-dev
02.<style scoped lang="scss"></style>
03.可以使用啦...
二：平时使用
0.1安装ruby
https://rubyinstaller.org/downloads/
安装步骤：https://www.sass.hk/install/
注：添加国内淘宝源使用
gem
sources -ahttps://gems.ruby-china.com/
0.2Hbuilder中配置
1.工具栏中依次选择：工具---预编译器设置
2.如果设置中有sass,scss选项，则点击编辑；如果没有就新增一个
3.只需要根据实际需求更改图片中的两个红框中的信息即可
其中：第一个红框是sass.bat的文件位置 默认在ruby安装位置中bin目录下
第二个红框是生成的css文件位置、命名方式及风格，直接复制下面这行文本即可
--no-cache %FileName% ../css/%FileBaseName%.css --style expanded
结尾的 –style compact是编译风格 有四个选项：nested expanded
compact compressed 。nested是默认的。风格区别参见开头sass安装链接中的文档。
两个红框信息填写完成后点击确定即可。
这时你在你的scss文件中ctrl+s保存时，会在同级目录下生成一个同名css文件。每次保存时都会更新。省去了手动编译的麻烦。
执行保存操作后在同级文件夹中生成同名css文件
Less
01.全局安装less
npm install -g less
//自定义函数插件，按需求安装
npm i less-plugin-functions -g
02.在hbuider中使用
触发命令地址，安装less地址
例：D:\nodejs\node_global\lessc.cmd
命令参数：%FileName% %FileBaseName%.css
03.确定，开始使用
在vue中使用scss或less
cnpm install scss-loader scss -D
cnpm install less-loader less -D
在vue中使用scss或less
原文地址：https://www.cnblogs.com/thbt/p/10414467.html