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

Question

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

我试过下面的方法，但是在启动dev环境的时候，好像我的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();

Answer 1

这对我有用

假设javascriptEnabled选项是必需的，你可以把它放在mixless函数中

.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
            }
        }
    }
});