【Vue学习】使用 “scss” 时报错‘:vue-style-loader css-loader?...‘

记录Vue系统学习的轨迹：2021-11-05
故事背景：新建了一个Vue项目，使用比较熟悉的scss，失败报错。

错误信息

This dependency was not found:

* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules
/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-5252bf00",
"scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}
!../../../node_modules/vue-loader/lib/selector?type=styles&index=0
!./index.vue in ./src/pages/main/index.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader
?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index
?{"vue":true,"id":"data-v-5252bf00","scoped":true,"hasInlineConfig":false}
!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector
?type=styles&index=0!./index.vue

处理办法

在终端依次输入：

> npm install sass-loader@7.3.1 --save-dev
> npm install node-sass --save
> npm install style-loader --save

注意：不能直接使用命令 npm install sass-loader --save-dev

不然会报以下错误：
Module build failed: TypeError: this.getResolve is not a function at Object.loader
因为当前sass的版本太高，webpack编译时出现了错误，所以指定：npm install sass-loader@7.3.1 --save-dev 安装低版本的。

参数配置

在 build/webpack.base.config.js 文件中添加

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

然后我本来以为ok了，结果。。。

后续发展

新错误提示

node-sass 6.0.1版本与^4.0.0不兼容

Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
    at getRenderFuncFromSassImpl (E:\Kala\KalaVue\node_modules\sass-loader\dist\index.js:165:13)
    at Object.loader (E:\Kala\KalaVue\node_modules\sass-loader\dist\index.js:79:18)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5252bf00","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/main/index.vue 4:14-382 13:3-17:5 14:22-390        
 @ ./src/pages/main/index.vue
 @ ./src/router/customRouter.js
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

第一次尝试解决（失败）

我查阅了一些网上的资料，于是先按照了查到的方法更改

1. 第一步：卸载node-sass（第二次突然成功）

> npm uninstall node-sass

第一次运行，我失败了，但是第二次运行，又突然成功了

> Error: EPERM: operation not permitted, unlink 'E:\...\node_modules\node-sass\vendor\win32-x64-83\binding.node'

根据我后续查资料的时候，有人说这个错误是因为网络不稳定导致的，可能是网突然好了然后就成功了吧，今天同事也一直反映网很卡。

2. 安装node-sass 4.0.0版本（失败）

> npm install node-sass@4.14.1

这一步的时候，我失败了，一直都安装不上去和之前卸载报几乎一样的错，我不确定是否多运行几次会像卸载一样碰巧成功，不过我试了两次以后放弃这个方法，开始试图使用别的方法，于是继续查资料。

我找到了一篇文章，里面说：
npm install命令并不会主动清除上次安装的包，而你上次安装的包又不完整，包与包之间又有依赖关系，结果自然就会出错。所以，要想解决这个问题，就应该彻底清除上次安装的包。

于是第二波走起来~

再次尝试解决（成功）

1. 第一步，删除node_modules文件夹

备注：其实一开始我跳过了第一步删除，直接去第二步清除缓存，结果第三步安装失败了

删除node modules文件夹的方式有两种：
①直接右键删除。【依赖过多时，删除速度非常非常慢】
②通过安装rimraf来删除【强烈推荐此方法，光速】。

// 安装 rimraf
> npm install -g rimraf

// 删除 node modules 文件夹
> rimraf node_modules

2. 第二步，清除npm缓存

清除npm缓存的方式有两种：
①直接删除缓存文件，删除C:\Users\用户名.npmrc 这个文件。
②执行命令行语句

我没用过第一种方法，并且我看有人表示：删除缓存文件后直接都加载不了了。所以我不敢试，我用的第二种方法

> npm cache clean --force

3. 第三步，安装node-sass 4.0.0版本

> npm install node-sass@4.14.1

4. 第四步，运行项目

> npm run dev

谢天谢地，痛哭流涕，万事大吉，终于成功了！！！

学习借鉴：

1. 在vue中使用lang=’scss‘出现报错解决思路【作者：sunlizhen】
2. Node Sass version 6.0.0 is incompatible with^4.0.0【作者：码龄1年零5个月】
3. NPM报错 Error: EPERM: operation not permitted, unlink…解决办法和清除缓存。【作者：吴梦婷~ wmt】