如何在VUE项目中使用SCSS

vue项目上安装SCSS和开发入门

① 使用vue-cli模板创建新项目：

vue init webpack myvue

② 安装sass 依赖包 ，在cmd界面输入：

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

③ 在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

④ 使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错

⑤ scss使用测试：如下测试修改字体颜色

<style lang="scss">
$color:red;
div {color:$color;}
</style>

“sass-loader”: “^8.0.0”,
package.json下的sass-loader版本太新可能会有问题，改为
“sass-loader”: “^7.0.0”,

转
https://www.cnblogs.com/catherLee/p/10233782.html