webpack - Webpack less-loader javascriptEnabled 错误
问题描述
当我尝试使用Webpack将 Ant Design 库加载到前端时,从6.0.0less-loader
版迁移到6.1.0版时出现此错误。我想知道其他人是否有这个问题并解决了它(我在下面回答了它)。
这是我更新前的 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
解决方案
在“less-loader”版本 6.1.0^ 中,他们对加载器进行了重大更改,如果您使用 Ant Design(或其他 LESS 和 JS 加载器)之类的东西,您通常会将标志添加到WebpackjavascriptEnabled: true
中的“选项”对象配置。
在版本6.1.0^中,这是要放置在less 加载器配置lessOptions
下的对象中的更改。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^的最新更新标准。
推荐阅读
- javascript - 如何从地图函数返回数据
- c# - 使用 XMLSerializer 在 WPF 应用程序中读取/保存设置文件
- r - 使用多个类别的 R 数据绘制图时遇到问题
- c - 添加两行并将总和存储在最后一行
- python-3.x - 如何使用 matplotlib plt.imshow 更改热图的 y 刻度标签?
- database - 如何在测试中模拟数据库
- backbone.js - Backbone.js:使用 RESTful API 时视图不会呈现
- python - “命令”没有属性“负载”
- python - 来自字符串的 Python 图形函数
- mysql - 如何使用带有 2 个表的 LEFT JOIN 从表 2 中提取最后一个数据?