Laravel :定制少装载机加工两次

Question

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

我尝试了以下方法，但是在启动dev环境时，我的less文件似乎被处理了两次：

./node_

/antd/es//index.less中的错误/style/index.less)模块构建失败(来自./node_dist/less-加载程序/dist/cjs.js)：

= 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选项是必需的，则可以将其放入混合少功能中。

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

对于其他较少的文件，我们似乎需要修改现有的较少的规则。

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