添加 "less" 和 "less-loader" 模块后如何修复损坏的 vuejs 项目

Question

我最近使用 IntelliJ 创建了一个简单的 vuejs 项目，并希望开始少用它。但是在运行 "npm install -D less less-loader" 之后我收到一个错误并且我无法解决它。我尝试同时降级 webpack 和 less-loader，但此时它只会导致更多错误。

正在播放的版本是：

vue: @vue/cli 4.5.13

节点：v16.3.0.

网络包：5.38.1

少：4.1.1

较少加载程序：9.1.0

上述错误：

     INFO  Starting development server...
 ERROR  Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
   "exclude": [
           null
             ],
       "use": [
              {
      "loader": "C:...\node_modules\@vue\cli-plugin-babel\node_modules\cache-loader\dis
t\cjs.js",
      "options": {
        "cacheDirectory": "C:...\node_modules\.cache\babel-loader",
        "cacheIdentifier": "2aa78f64"
             },
      "ident": "clonedRuleSet-38[0].rules[0].use[0]"
             },
              {
      "loader": "C:...\node_modules\babel-loader\lib\index.js",
      "options": "undefined",
      "ident": "undefined"
              }
              ]
              }

Answer 1

如果您使用的是 Webpack4，则需要安装 less-loader 的 v7。因此尝试

less-loader@^7

并遵循此配置：https://vue-loader.vuejs.org/guide/pre-processors.html#less

添加 "less" 和 "less-loader" 模块后如何修复损坏的 vuejs 项目

How to fix a broken vuejs project after adding "less" and "less-loader" module

node.js

vue.js

less

webpack-dev-server

less-loader