在Vue中使用scss


一、安装

安装node-sass

npm install node-sass --save-dev

推荐安装低版本node-sass

npm install node-sass@4.14.1 --save-dev

如果出现以下报错是因为node-sass版本过高导致编译错误

Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

报错截图1

解决方案:将node-sass版本调至4.14.1

npm uninstall node-sass
npm install node-sass@4.14.1 --save-dev
如果安装失败,可以使用淘宝镜像安装。

安装sass-loader

npm install sass-loader --save-dev

推荐安装低版本sass-loader

npm install sass-loader@7.3.1 --save-dev

如果出现以下报错是因为sass-loader版本过高导致编译错误

Module build failed: TypeError: this.getOptions is not a function

报错截图2

解决方案:将sass-loader版本调至7.3.1

npm uninstall sass-loader
npm install sass-loader@7.3.1 --save-dev

二、配置

webpack.base.conf.js文件下的配置rules

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

配置 rules

三、引用

<style lang="scss" scoped>
...
</style>

版权声明:本文为qq_46067720原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。