在Vue中使用sass

1.创建一个Vue项目

$ vue init webpack your-project

2.安装依赖

$ cd your-project
$ npm install

3.安装sass依赖包

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

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

{
test: /\.sass$/,
loaders: [‘style’, ‘css’, ‘sass’]
}
如下图所示：

5.在Vue中修改style标签

<style lang="scss">

注意是 lang=”scss” 而不是 lang=”sass”

6.运行项目

npm run dev

7.在APP.vue中修改样式查看效果

<style lang="scss">
$background:#cccccc;
body{
background:$background;
}
</style>

如果运行的项目背景色改变为灰色，就证明已经配置好sass。