error in ./src/components/bar3d/index.vue?vue&type=style&index=0&id=8bbd10f2&lang=scss&scoped=true&

本文讲述了如何通过降低node版本、更新loader配置和重新安装依赖来修复因node版本过高导致的Sass编译错误,确保项目顺利运行。步骤包括检查node版本、更新package.json中的loader版本、卸载并重新安装Sass等。

问题描述

npm run serve 项目运行 中 sass报错问题

 error  in ./src/components/staffMix/index.vue?vue&type=style&index=0&id=759e82ef&lang=scss&scoped=true&

 


原因分析:

node版本过高 导致项目启动sass报错


解决方案:

检查node版本  

node -v

若node版本为16以上,则执行下面操作 

 1.在package.json文件中修改 sass-loader 为 ^7.0.3

 2.执行 npm uninstall node-sass  命令

npm uninstall node-sass

 3.执行 npm i -D sass  命令

npm i -D sass

4.删除 node_modules 文件夹

 

5.重新下载 node_modules 依赖 

npm install

 6.重启项目

7.问题解决

完成以上步骤,代码就能正常运行了

Failed to compile with 2 errors 13:44:24 error in ./src/views/OverviewMap.vue?vue&type=script&lang=js Module not found: Error: Can't resolve 'echarts' in 'C:\Users\ghs11\Desktop\ccccc\zgsd14-bi-common-web\src\views' error in ./src/components/map/js/china.js Module not found: Error: Can't resolve 'echarts' in 'C:\Users\ghs11\Desktop\ccccc\zgsd14-bi-common-web\src\components\map\js' ERROR in ./src/views/OverviewMap.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/OverviewMap.vue?vue&type=script&lang=js) 17:0-35 Module not found: Error: Can't resolve 'echarts' in 'C:\Users\ghs11\Desktop\ccccc\zgsd14-bi-common-web\src\views' @ ./src/views/OverviewMap.vue?vue&type=script&lang=js 1:0-204 1:220-223 1:225-426 1:225-426 @ ./src/views/OverviewMap.vue 2:0-62 10:2-8 3:0-57 3:0-57 @ ./src/router/index.js 3:0-51 12:13-24 @ ./src/main.js 7:0-30 16:10-16 ERROR in ./src/views/OverviewMapUnder.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/OverviewMapUnder.vue?vue&type=script&lang=js) 17:0-35 Module not found: Error: Can't resolve 'echarts' in 'C:\Users\ghs11\Desktop\ccccc\zgsd14-bi-common-web\src\views' @ ./src/views/OverviewMapUnder.vue?vue&type=script&lang=js 1:0-209 1:225-228 1:230-436 1:230-436 @ ./src/views/OverviewMapUnder.vue 2:0-67 10:2-8 3:0-62 3:0-62 @ ./src/router/index.js 4:0-61 16:13-29 @ ./src/main.js 7:0-30 16:10-16 ERROR in ./src/components/map/js/china.js Module not found: Error: Can't resolve 'echarts' in 'C:\Users\ghs11\Desktop\ccccc\zgsd14-bi-common-web\src\components\map\js' @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/OverviewMapUnder.vue?vue&type=script&lang=js 21:0-39 @ ./src/views/OverviewMapUnder.vue?vue&type=script&lang=js 1:0-209 1:225-228 1:230-436 1:230-436 @ ./src/views/OverviewMapUnder.vue 2:0-67 10:2-8 3:0-62 3:0-62 @ ./src/router/index.js 4:0-61 16:13-29 @ ./src/main.js 7:0-30 16:10-16 ERROR in ./src/components/map/js/world.js Module not found: Error: Can't resolve 'echarts' in 'C:\Users\ghs11\Desktop\ccccc\zgsd14-bi-common-web\src\components\map\js' @ ./src/main.js 11:0-38
09-20
ERROR Failed to compile with 15 errors 19:23:20 These dependencies were not found: * @/assets/scss/index.scss in ./src/main.js * @/assets/scss/element-variables.scss in ./src/store/modules/settings.js * @/assets/scss/variables.scss in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/component s/layout/components/Sidebar/index.vue * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-25dd13 b4","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0! ./Navbar.vue in ./src/components/layout/components/Navbar.vue * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-4b6c35 86","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0! ./AppMain.vue in ./src/components/layout/components/AppMain.vue * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-4b6c35 86","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=1 !./AppMain.vue in ./src/components/layout/components/AppMain.vue * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-730 5d6ec","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../../node_modules/vue-loader/lib/selector?type=styles&in dex=0!./index.vue in ./src/components/layout/components/Settings/index.vue * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-01f 74042","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../../node_modules/vue-loader/lib/selector?type=styles&in dex=0!./Logo.vue in ./src/components/layout/components/Sidebar/Logo.vue * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-9ae6fe 9e","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0! ./index.vue in ./src/components/unit/Breadcrumb/index.vue * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-166e10 03","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0! ./index.vue in ./src/components/unit/HeaderSearch/index.vue * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-93f40a a4","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0! ./404.vue in ./src/components/views/error-page/404.vue * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-944897 aa","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0! ./401.vue in ./src/components/views/error-page/401.vue * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-c5fca1 aa","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=1! ./index.vue in ./src/components/views/login/index.vue * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-c5fca1 aa","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0 !./index.vue in ./src/components/views/login/index.vue To install them, you can run: npm install --save @/assets/scss/index.scss @/assets/scss/element-variables.scss @/assets/scss/variables.scss !!v ue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-25dd13b4"," scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Nav bar.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v- 4b6c3586","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&in dex=0!./AppMain.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true," id":"data-v-4b6c3586","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?t ype=styles&index=1!./AppMain.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../../node_modules/vue-loader/lib/style-compiler/ind ex?{"vue":true,"id":"data-v-7305d6ec","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../../node_modules/vue-loa der/lib/selector?type=styles&index=0!./index.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../../node_modules/vue-loader/lib/st yle-compiler/index?{"vue":true,"id":"data-v-01f74042","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../../node _modules/vue-loader/lib/selector?type=styles&index=0!./Logo.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-l oader/lib/style-compiler/index?{"vue":true,"id":"data-v-9ae6fe9e","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../. ./../node_modules/vue-loader/lib/selector?type=styles&index=0!./index.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_mod ules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-166e1003","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":tru e}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./index.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../. ./node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-93f40aa4","scoped":true,"hasInlineConfig":false}!sass-loader?{"sour ceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./404.vue !!vue-style-loader!css-loader?{"sourceMap":true}!.. /../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-944897aa","scoped":true,"hasInlineConfig":false}!sass-loade r?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./401.vue !!vue-style-loader!css-loader?{"sourceMap": true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-c5fca1aa","scoped":true,"hasInlineConfig":false}!sa ss-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=1!./index.vue !!vue-style-loader!css-loader?{"s ourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-c5fca1aa","scoped":false,"hasInlineConfig ":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./index.vue This relative module was not found: * ./assets/scss/element-variables.scss in ./src/main.js
05-30
warning package.json: "dependencies" has dependency "pdfjs-dist" with range "2.12.313" that collides with a dependency in "devDependencies" of the same name with version "4.2.67" $ cross-env PACKAGE_DIR=liveapp NODE_ENV=production VUE_APP_BUILD_TARGET=dev lerna run build lerna notice cli v7.4.2 lerna info versioning independent > insight-card:build warning ..\..\..\package.json: "dependencies" has dependency "pdfjs-dist" with range "2.12.313" that collides with a dependency in "devDependencies" of the same name with version "4.2.67" $ vue-cli-service build Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest Why you should do it regularly: https://github.com/browserslist/update-db#readme - Building for production... ERROR Failed to compile with 3 errors17:01:19 These dependencies were not found: * @/server/event in D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/cache-loader/dist/cjs.js??ref--13-0!D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/thread-loader/dist/cjs.js!D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/babel-loader/lib!D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/cache-loader/dist/cjs.js??ref--1-0!D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/vue-loader-v16/dist??ref--1-1!D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/src/pages/eventVein/components/TimelineView.vue?vue&type=script&setup=true&lang=js * @/server/homePage in D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/cache-loader/dist/cjs.js??ref--13-0!D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/thread-loader/dist/cjs.js!D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/babel-loader/lib!D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/cache-loader/dist/cjs.js??ref--1-0!D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/vue-loader-v16/dist??ref--1-1!./entry.vue?vue&type=script&lang=js /dist/cjs.js??ref--1-0!D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/vue-loader-v16/dist??ref--1-1!./entry.vue?vue&type=script&lang=js * @/store in D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/src/components/HeaderBar/useAssembleQuery.js To install them, you can run: npm install --save @/server/event @/server/homePage @/store ERROR Build failed with errors. error Command failed with exit code 1. /dist/cjs.js??ref--1-0!D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/vue-loader-v16/dist??ref--1-1!./entry.vue?vue&type=script&lang=js * @/store in D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/src/components/HeaderBar/useAssembleQuery.js To install them, you can run: npm install --save @/server/event @/server/homePage @/store ERROR Build failed with errors. /dist/cjs.js??ref--1-0!D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/node_modules/vue-loader-v16/dist??ref--1-1!./entry.vue?vue&type=script&lang=js * @/store in D:/CodeHub/dev_jck/eureka.ThinkTankInsight.web/src/components/HeaderBar/useAssembleQuery.js To install them, you can run: npm install --save @/server/event @/server/homePage @/store ERROR Build failed with errors. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
11-04
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值