【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命令并不会主动清除上次安装的包，而你上次安装的包又不完整，包与包之间又有依赖关系，结果自然就会出错。所以，要想解决这个问题，就应该彻底清除上次安装的包。

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记