javascript - Laravel Mix：自定义少加载器处理两次

Question

我正在尝试添加less-loader到我的 Laravel Mix 配置中，因为我的一些导入模块需要它。

我尝试了以下方式，但是在启动开发环境时，看起来我的less文件被处理了两次：

./node_modules/antd/es/style/index.less 中的错误 (./node_modules/css-loader!./node_modules/postcss-loader/src??ref--12-2!./node_modules/less-loader/ dist/cjs.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js??ref--15-2!./node_modules/antd/ es/style/index.less) 模块构建失败（来自 ./node_modules/less-loader/dist/cjs.js）：

var content = require("!!../../../css-loader/index.js!../../../less-loader/dist/cjs.js??ref--15- 2!./index.less");

无法识别的输入

有谁知道问题出在哪里或我做错了什么？

mix.reactTypeScript('resources/js/app.tsx', 'public/js')
  .less('resources/css/app.css', 'public/css')
  .copyDirectory('resources/img', 'public/img')
  .webpackConfig({
    module: {
      rules: [
        {
          test: /\.less$/,
          loader: [
            'style-loader',
            'css-loader',
            {
              loader: 'less-loader',
              options: {
                javascriptEnabled: true
            }
          }
        ]
      }
   ]}
 })
 .version();

标签： javascriptwebpacklessantdlaravel-mix

Answer 1

这对我有用

假设该javascriptEnabled选项是必需的，您可以将其放入 mix less 函数中

.less('resources/css/app.css', 'public/css', {
   lessOptions: { javascriptEnabled: true }
})

对于其他的less文件，看来我们需要修改现有的less规则

Mix.listen("configReadyForUser", function (config) {
    var ruleIndex = config.module.rules.findIndex(function (rule) {
        return rule.test.toString() === /\.less$/.toString();
    });
    var loaderIndex = config.module.rules[ruleIndex].loaders.findIndex(function (loader) {
        return loader === 'less-loader';
    });
    config.module.rules[ruleIndex].loaders[loaderIndex] = {
        loader: 'less-loader',
        options: {
            lessOptions: {
                javascriptEnabled: true
            }
        }
    }
});