在Vue 中使用 sass的配置方法

1、创建一个基于webpack 模板的新项目；

$ vue init webpack vue-sass;

2、在当前目录下，安装依赖；

$ cd vue-sass
$ npm install

3、安装sass的依赖包；

1.npm install sass-loader
2.sass-loader 依赖于node-sass;
3.npm install node-sass

4、在build文件下的 webpack.base.conf.js的rules里的配置；

{
test: ‘/.scss$/’,
loaders: [‘style’, ‘css’, ‘sass’]
},

5、在APP.vue 中修改style标签

6、修改APP.vue的样式，可以看下效果

KaTeX parse error: Expected 'EOF', got '#' at position 13: background: #̲cccccc; ****bg_red:red;
$bg_yellow:yellow;
$fs_24:24px;****
.hello {
background-color: red;
color: #444;
h1 {
font-weight: normal;
background-color: #42b983;
font-size: $fs_24;
color: $bg_yellow;
}
h2 {
background-color: #fff
}
}
body{
background: $background;
}加粗样式

7、然后运行项目

$ npm run dev

查看对应的样式是不是设置成功，如果成功证明sass设置成功，因为sass不支持大括号{}，而scss却支持；