vue + webpack + element ui自定义主题使用scss踩坑记录

阅读本篇文章大约需要4分钟，可以直接搜索你现在遇到的坑无需全文阅读，如果不是踩坑而不小心打开了这篇文章可以略读，建议收藏以备。

一、问题描述

项目中原本没有用scss所以需要按照下面来安装

npm i sass-loader node-sass --save-dev

好的，坑来了！

二、好多坑

① 错误："py.exe" is not in PATH or produced an error gyp ERR! find Python gyp ERR!

解决方法：以管理员身份运行命令行：npm install --global --production windows-build-tools

② 错误：no such file or directory, access 'D:\projects\el-mdm\node_modules\tar

解决方法：将node_modules文件夹删除，重新npm install

③ 错误：This relative module was not found: * ./element-variables.scss in ./src/main.js

解决方法：好多说删除webpack.base.conf.js中对于scss的rules就好了，因为新版配置在utils中已经配置好了。但是，我删了之后还是报错④。

④ 错误一：The “path” argument must be of type string. Received undefined

    错误二：this.getResolve is not a function

解决方法：因为sass-loader的版本太高，所以把package.json文件的sass-loader的版本号改为^7.3.1再重新装包。

⑤ 错误：Node Sass version 5.0.0 is incompatible with^4.0.0

解决方法：安装4.14.1版本的node-sass，即npm install node-sass@4.14.1。

⑥ 错误：Cannot download "https://github.com/sass/node-sass/releases/download

Could not find any Python installation to use

解决方法：安装指定版本的node-sass然后报了这个错，这个时候需要配置环境变量：（win10系统）右击此电脑->属性->高级系统设置->右下的环境变量点进去进行配置，新建一个系统变量：

变量名：SASS_BINARY_PATH

变量值：C:\Users\liyamin004\AppData\Roaming\npm-cache\node-sass\4.14.1\win32-x64-67_binding.node（具体路径需要找到自己项目里的npm-cache/node-sass，可以搜索C:\Users\自己电脑中的用户名\AppData\Roaming\npm-cache）

⑦ 错误：Error: ENOENT: no such file or directory, scandir 'xxxxxx\node_modules\.npminstall\node-sass\3.7.0\node-sass\vendor'

解决方法：npm rebuild node-sass

⑧ npm rebuild node-sass 没有反应或报错

解决方法：安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org

然后：cnpm install node-sass

总结：一定是我太菜了踩了这么多坑，可能实际项目中只遇到一两个，无论如何，希望本文对你有些许帮助，动动手指点个赞吧，你的鼓励是我创作的动力，笔芯♥。