Webpack less-loader javascriptEnabled 错误答案

【问题标题】：Webpack less-loader javascriptEnabled ErrorWebpack less-loader javascriptEnabled 错误
【发布时间】：2020-05-08 19:11:05
【问题描述】：

当我尝试将我的 Ant Design 库加载到我的前端时，我从 less-loader 版本 6.0.0 迁移到版本 6.1.0 时遇到了这个错误 -以 Webpack 结尾。我想知道其他人是否有这个问题并解决了它（我在下面回答了它）。

这是我更新前的 LESS 编译配置：

module: { rules: [{
    test: /\.less$/,
    use: [
        { loader: "style-loader" },
        { loader: "css-loader" },
        {
            loader: "less-loader",
            options: {
                javascriptEnabled: true,
            }
        }
    ]
}]}

ERROR in ./node_modules/.pnpm/registry.npmjs.org/antd/4.2.0_react-dom@16.13.1+react@16.13.1/node_modules/antd/dist/antd.less (./node_modules/.pnpm/registry.npmjs.org/css-loader/3.5.3_webpack@4.43.0/node_modules/css-loader/dist/cjs.js!./node_modules/.pnpm/registry.npmjs.org/less-loader/6.1.0_webpack@4.43.0/node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/.pnpm/registry.npmjs.org/antd/4.2.0_react-dom@16.13.1+react@16.13.1/node_modules/antd/dist/antd.less)
Module build failed (from ./node_modules/.pnpm/registry.npmjs.org/less-loader/6.1.0_webpack@4.43.0/node_modules/less-loader/dist/cjs.js):
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'javascriptEnabled'. These properties are valid:
   object { lessOptions?, prependData?, appendData?, sourceMap?, implementation? }
    at validate (/home/<path>/react-web/node_modules/.pnpm/registry.npmjs.org/schema-utils/2.6.6/node_modules/schema-utils/dist/validate.js:88:11)
    at Object.lessLoader (/home/<path>/react-web/node_modules/.pnpm/registry.npmjs.org/less-loader/6.1.0_webpack@4.43.0/node_modules/less-loader/dist/index.js:22:28)
 @ ./node_modules/.pnpm/registry.npmjs.org/antd/4.2.0_react-dom@16.13.1+react@16.13.1/node_modules/antd/dist/antd.less 2:26-228
 @ ./src/index.tsx
 @ multi ./src/index.tsx

【问题讨论】：

标签： webpack antd less-loader

【解决方案1】：

在“less-loader”版本 6.1.0^ 他们对加载器进行了重大更改，如果您使用 Ant Design（或其他 LESS 和 JS 加载器）之类的东西，您通常会将 javascriptEnabled: true 标志添加到“ Webpack 配置中的 options" 对象。

在 6.1.0^ 版本中，这已被更改为放置在 lessOptions 对象中，位于 less 加载程序的 options 配置下。这是我使用的解决方案，适用于我的 Webpack 配置包。

module: { rules: [{
    test: /\.less$/,
    use: [
        { loader: "style-loader" },
        { loader: "css-loader" },
        {
            loader: "less-loader",
            options: {
                lessOptions: {
                    javascriptEnabled: true,
                }
            }
        }
    ]
}]}

注意javascriptEnabled 标志不在顶级options 对象下，而是在lessOptions 子对象下。这是 less-loader 版本 6.1.0^ 的最新更新标准。

【讨论】：