vue 安装scss

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.安装插件

npm install node-sass --save-dev
npm install sass-loader --save-dev

在App页面测试是否可用,在style 上添加<style lang="scss">
vue-cli3 版本以上安装完就可以使用，如果页面报错，在package.json 中检查 sass-loader 的版本，最新版8.0版本，版本过高无法解析会报错，将版本降支7.3.1 就好了，亲测可用

2.scss 设置全局变量

先安装插件 sass-resources-loader

然后修改vue-cli的build/utils.js找到scss的加载设置：

修改为：

其中path.resolve需要引入待传入的scss文件，--dirname 表示当前目录，然后一步一步找到自己需要引入的文件

注：变量文件如引入图片的话，需注意路径

3.scss 使用

1.$开头，设置变量 $color:#468feb;

.嵌套使用{}

3.@extend 类名;  继承
4.@mixin（定义） @include（引用）混合器