- 安装依赖
// 版本过高会引起一系列的问题
npm install sass-loader --save-dev
npm install node-sass --sava-dev
- 添加scss规则(新版本vue-cli省略此步骤)
// /build/webpack/base/conf.js文件
module: {
rules: [
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
}
// 新版本vue-cli已经帮我们把sass-loader配置好了,放在util.js里面了
// util.js
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
- 常见报错
ERROR Failed to compile with 1 errors 5:25:07 PM
This relative module was not found:
\* ./main.scss in ./src/main.js
新版本的vue-cli已经帮我们把sass-loader配置好了,放在util.js里面了,不需要再进行第二步操作
this.getResolve is not a function
sass-loader的版本过高导致编译错误,把项目package.json文件中sass-loader版本改为7.3.1
Node Sass version 6.0.1 is incompatible with ^4.0.0.
node-sass 版本过高,需要卸载安装低版本。