Vue项目使用sass及注意事项

如何使用

npm镜像替换

npm镜像替换步骤

安装sass

cnpm i -D sass-loader node-sass

配置sass

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

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

使用sass

vue文件所在的style样式标签上添加lang="scss"即可使用

注意事项

Module build failed: TypeError: this.getResolve is not a function（sass版本过高问题）

解决方法：当为webpack3时在package.json文件设置node-sass版本设置为"^4.7.2"， sass-loader版本设置为"^6.0.7"，重新下载依赖cnpm i,执行npm run start

UnhandledPromiseRejectionWarning: CssSyntaxError

解决方法：scss文件css注释使用多行注释（/**/），不要使用单行注释（//）