Webpack5配置less支持

663 阅读1分钟

没用过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

无话可说

以上