1. sass-loader依赖于node-sass,所以要安装node-sass
1 2 3 | cnpm install node-sass --save-dev //安装node-sass cnpm install sass-loader --save-dev //安装依赖包sass-loader cnpm install style-loader --save-dev //安装style-loader |
2. 在build文件夹下的webpack.base.conf.js的module下 rules里面添加配置
1 2 3 4 | { test: /\.sass$/, loaders: ['style', 'css', 'sass'] }, |
3. 在需要用到sass的地方添加lang=scss
注: 安装sass 出现问题 运行npm run dev 报错!
1 | Modele build failed: TypeError: this.getResolve is not a function at Object.loader... |
这是因为当前sass的版本太高,webpack编译时出现了错误,这个时候只需要换成低版本的就行,下面说一下修改方法,很简单,如下,找到package.json文件,里面的 "sass-loader"的版本更换掉 就行了。
解决方法:
1 | 将 "sass-loader": "^8.0.0",更换成了 "sass-loader": "^7.3.1", |
也可以先卸载当前版本,然后安装指定的版本
1 2 | 卸载当前版本 npm uninstall sass-loader 安装 npm install sass-loader@7.3.1 --save-dev |