没用过less,不怎么熟悉。搞个react项目用antd,报less无法解析。以为就堆一个less-loader就好了。
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader',
]
}
结果报错:
Compiled with problems:
ERROR in ./node_modules/antd/es/button/style/index.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./node_modules/antd/es/button/style/index.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
Error in /.../node_modules/antd/es/style/color/bezierEasing.less (line 110, column 0)
哦吼,不认识bezierEasingMixin()
?搜了一下,提示加配置项:
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
}
}
]
}
继续报错:
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:
配置项改了?搜了一下,说是webpack4之后不支持这个写法。继而搜出来一堆奇奇怪怪的代码。
万事不决看文档吧,直接上npmjs
搜……所以正确格式为:
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
}
}
}
]
}
lessOptions
lessOptions
lessOptions
无话可说
以上