当前位置: 首页 > 工具软件 > css-loader > 使用案例 >

vue 报错 !!vue-style-loader!css-loader?{“sourceMap“:true}!.

景元忠
2023-12-01

npm run dev 报错

These dependencies were not found:

* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-858b20d4","scoped":true,"hasInlineConfig":false}!px2rem-loader?{"remUnit":37.5}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./diyCoupon.vue in ./src/diy/diyCoupon.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-a87ce868","scoped":true,"hasInlineConfig":false}!px2rem-loader?{"remUnit":37.5}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./consumeClient.vue in ./src/pageSales/consumeClient.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-5f7603b6","scoped":true,"hasInlineConfig":false}!px2rem-loader?{"remUnit":37.5}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./orderStatistics.vue in ./src/pageSales/orderStatistics.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-67910de7","scoped":true,"hasInlineConfig":false}!px2rem-loader?{"remUnit":37.5}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./fenchengAnalyze.vue in ./src/pageSales/fenchengAnalyze.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-7951aa06","scoped":true,"hasInlineConfig":false}!px2rem-loader?{"remUnit":37.5}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./fenchengDetail.vue in ./src/pageSales/fenchengDetail.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-838c54ca","scoped":true,"hasInlineConfig":false}!px2rem-loader?{"remUnit":37.5}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./visitClient.vue in ./src/pageSales/visitClient.vue

To install them, 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-858b20d4","scoped":true,"hasInlineConfig":false}!px2rem-loader?{"remUnit":37.5}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./diyCoupon.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-a87ce868","scoped":true,"hasInlineConfig":false}!px2rem-loader?{"remUnit":37.5}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./consumeClient.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-5f7603b6","scoped":true,"hasInlineConfig":false}!px2rem-loader?{"remUnit":37.5}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./orderStatistics.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-67910de7","scoped":true,"hasInlineConfig":false}!px2rem-loader?{"remUnit":37.5}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./fenchengAnalyze.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-7951aa06","scoped":true,"hasInlineConfig":false}!px2rem-loader?{"remUnit":37.5}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./fenchengDetail.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-838c54ca","scoped":true,"hasInlineConfig":false}!px2rem-loader?{"remUnit":37.5}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./visitClient.vue

解决方案
此类问题一般是缺少相关依赖而导致的,对于本例,仔细看一下报错提示信息,抓住关键词,vue-style-loader!css-loader,说明是css解析的时候出了问题。
所以,解决方案就要根据情况而定,看你使用的CSS语言是什么,是 常规的 或者 less 或者 sass。

输入命令,不知道是什么,三个都执行一遍

npm install stylus-loader css-loader style-loader --save-dev
npm install less less-loader --save-dev
npm install sass sass-loader --save-dev

执行完后再执行 npm run dev
再报错

 UnhandledPromiseRejectionWarning: TypeError: loaderContext.getResolve is not a function

这时会卡住,进度条不会往下进行
这是安装的 less 版本太高,安装个低版本即可

npm install less-loader@5.0.0 -D

再次运行 npm run dev 执行成功

 类似资料: