vue项目sass-loader安装及报错解决

1、安装 sass-loader

npm i node-sass sass-loader -D

2、整理 node-sass 安装失败的原因及解决办法

npm 安装 node-sass 依赖时， 由于国内网络环境的问题，有时会失败。

解决方法：使用淘宝镜像

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

3、安装 node-sass 运行报错

安装node-sass运行报错：Module build failed: TypeError: this.getResolve is not a function at Object.loader

这是因为当前 sass 的版本太高，webpack 编译时出现了错误，这个时候只需要换成低版本的就行

卸载当前版本：npm uninstall sass-loader

然后安装：npm install sass-loader@7.3.1 -D

网上有的需要改 package.json 版本， 实测过 包安装后会自己改掉的。

4、配置 webpack

都安装成功后：

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

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

5、改标签

<style lang="scss">