一:安装ruby
https://rubyinstaller.org/downloads/
安装步骤:https://www.sass.hk/install/
注:添加国内淘宝源使用
gem sources -ahttps://gems.ruby-china.com/
二:Hbuilder中配置
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会自动解析