winney

It is never too old to learn.

0%
winney

在Vue项目中使用sass的配置方法

发表于 更新于 分类于 ，

1、安装sass的依赖包

sass-loader依赖于node-sass

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

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

1
2
3
4
{
 test: /\.sass$/,
 loaders: ['style', 'css', 'scss']
}
1
2
3
4
5
6
7
8
9
module:{
	rules:[
		...
		{
			test: /\.scss$/,
			loaders:['style','css','sass']
		}
	]
}

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

1
2
3
4
5
6
7
<style lang="scss">
   $blue:red;
    .common-header{
        color: $blue;
    }
</style>

4、运行项目

1
npm run dev
注意：

如有以下报错，是版本的问题影响的：

Module build failed: TypeError: this.getResolve is not a function at Object.loader 安装node-sass运行报错

解决方法： 选择更低版本的sass-loader

卸载当前版本：npm uninstall sass-loader
安装指定版本：npm install sass-loader@7.3.1 –save-dev

参考： 安装node-sass运行报错