vue项目报错!../../node_modules/vue-loader/lib/style-compiler/index?.........（及安装less-loader相关步骤）

报错原因：解决方法：1.安装less-loader2.配置\build\webpack.base.conf.js文件报错：F:\学习\qunar_new> npm run dev> vue_qunar_new@1.0.0 dev F:\学习\qunar_new> webpack-dev-server --inline --progress --config build/webpa

豆逗逗

6549人浏览 · 2021-10-15 09:06:06

豆逗逗 · 2021-10-15 09:06:06 发布

报错原因：
解决方法：
- 1.安装less-loader
- 2.配置\build\webpack.base.conf.js文件

报错：

F:\学习\qunar_new> npm run dev

> vue_qunar_new@1.0.0 dev F:\学习\qunar_new
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

(node:14704) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
 10%  1 1 12% 1 1 13% 13% 13% 14% 14% 1 1 1 14% 94% asset optimization                                                                 

 ERROR  Failed to compile with 2 errors                                                                                      下午4:52:56
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-381cbdf4","scoped":true,"hasInlineConfig":false}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./first.vue in ./src/views/first.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-2619db34","scoped":true,"hasInlineConfig":false}!less-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./totalData.vue in ./src/views/dataAssets/totalData.vue

To install them, you can run: npm install --save !!vue-style-loader!css-loader?{

报错原因：

根据报错发现，是缺少相关依赖
（我的是项目中使用了less，却没有安装相关依赖）
在这里插入图片描述

解决方法：

1.安装less-loader

npm install less-loader@5.0.0 --save-dev
或者(npm install less-loader --save-dev)这种有可能因为less-loader版本过高报错，此时选用上边这条命令

2.配置\build\webpack.base.conf.js文件

//加入这部分代码
module: {
        rules: [
        {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader",
            }
        ]
      }