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。