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

Question

我最近使用IntelliJ创建了一个简单的vuejs项目，并希望开始使用less。但是在运行"npm install -D less-loader“之后，我得到了一个错误，并且我无法解开它。我试着降低了webpack和less-loader的级别，但在这一点上导致了更多的错误。

正在使用的版本包括：

vue：@vue/cli 4.5.13

节点: v16.3.0。

webpack: 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

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

less-loader@^7

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