Error: Cannot find module ‘sass‘

祈祷平安,加油

已于 2024-04-23 13:27:19 修改

阅读量354

点赞数

文章标签： vue.js javascript 前端

于 2023-07-13 18:26:46 首次发布

本文链接：https://blog.csdn.net/qq_31016939/article/details/131708846

版权

在Vue项目开发中遇到一个编译错误，错误源于sass-loader在解析.scss文件时找不到sass模块。node-sass是sass-loader的依赖，用于处理Sass语法。为了解决这个问题，开发者执行了npxinstallnode-sass来安装缺失的模块，确保sass-loader能正常工作。

摘要由CSDN通过智能技术生成

今天遇到一个非常奇怪的问题，就一个简单的登录页面，页面代码检查了好几次。没有发现

main.js文件也检查了，没有发现问题

index.js 路由文件检查了，也没发现问题

ERROR in ./src/App.vue?vue&type=style&index=1&id=7ba5bd90&lang=scss&scoped=true (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.
js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=1&id=7ba5bd90&lang=scss&scoped=true)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Cannot find module 'sass'
Require stack:
- F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\sass-loader\dist\utils.js
- F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\sass-loader\dist\index.js
- F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\sass-loader\dist\cjs.js
- F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\webpack\lib\ProgressPlugin.js
- F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\progress-webpack-plugin\index.js
- F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\@vue\cli-service\lib\commands\serve.js
- F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\@vue\cli-service\lib\Service.js
- F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\@vue\cli-service\bin\vue-cli-service.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
at Module._load (node:internal/modules/cjs/loader:920:27)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at getDefaultSassImplementation (F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\sass-loader\dist\utils.js:37:10)
at getSassImplementation (F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\sass-loader\dist\utils.js:46:30)
at Object.loader (F:\highschool\Springboot+Element备课\vue-project2023-06-18\node_modules\sass-loader\dist\index.js:23:55)
@ ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRu
leSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=1&id=7ba5bd90&lang=scss&scoped=true 4:14-401 15:3-20:5 16:2
2-409
@ ./src/App.vue?vue&type=style&index=1&id=7ba5bd90&lang=scss&scoped=true 1:0-459 1:0-459
@ ./src/App.vue 6:0-75
@ ./src/main.js 3:0-28 25:22-25

从上面的错误信息中找了老半天错误关键信息，报错关键信息是Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

cnpm install node-sass

在安装node-sass之前，我先介绍一下什么是node-sass。node-sass是一个项目依赖，在一个项目中在使用sass语法的时候，必须通过sass-loader来解析sass，从而使sass语法变成浏览器能够识别的CSS语法，而node-sass模块就是对sass-loader的支持模块，所以不安装node-sass，sass-loader就不能正常工作
node-sass安装过程中问题的解决