安装scss以及遇到的问题

安装scss以及遇到的问题

1、安装

 //安装node-sass 
npm install node-sass --save-dev
注意：npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g(安装node-sass 报错的话，先输入这个命令)

//安装sass-loader 
npm install sass-loader --save-dev 

 //安装style-loader
npm install style-loader --save-dev

2、配置文件

1.打开：build文件夹下面的webpack.base.config.js
2.找到：module>rules
3.添加：{
test: /.scss$/,
loaders: [“style”, “css”, “sass”]
}

3、编写

在需要用到sass的地方添加lang=scss

4、安装完成后报错

原因：sass-loader的版本过高，导致的编译错误，当前最高版本是8.x，需要退回到7.3.1。

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

解决办法：先卸载当前sass-loader

npm uninstall sass-loader（卸载当前版本）

再安装7.3.1版本：

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

注意：如果在安装node-sass时候报错：

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Cannot find module 'node-sass‘
用这个方法：
npm cache clean -force
npm install -g mirror-config-china
npm install node-sass（或者npm install node-sass --save-dev）