从JavaScript文件将Less导入Less文件

如何解决从JavaScript文件将Less导入Less文件

我正在尝试从JavaScript文件中导入通过其他加载器生成的内容。

应该基于less-loaders README.md：

使用webpack的解析器，您可以导入任何文件类型。您只需要一个导出有效的Less代码的加载程序。通常，您还需要设置发行者条件，以确保此规则仅适用于源自Less文件的导入。

但是显然它不起作用。不管我使用哪个加载程序，less文件总是以JavaScript源结尾。我也尝试了有无推荐的issuer条件，但无济于事。我写来检查其是否正常工作的自定义加载程序也没有被调用。

---

我将webpack@5.1.0与less-loader@7.0.2一起使用。

// ./webpack.config.js
{
    entry: './index.js',mode: 'development',module: {
        rules: [
            {
                test: /\.less$/,use: [
                    'style-loader','css-loader','less-loader'
                ]
            },{
                test: /\.less\.js$/,issuer: /\.less$/,// <------
                use: [
                    {
                        loader: require.resolve('./test-loader.js')
                    }
                ]
            }
        ]
    }
}

// ./main.less
@import './import.less.js';

body { background: green; }

// ./index.js
import './main.less';

// ./import.less.js
module.exports = 'body { color: red; }';

// ./test-loader.js
module.exports = (source) => {
  console.log('It should call this loader',source);
  // parse content
  return source;
}

错误：

ERROR in ./main.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./main.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):


module.exports = 'body { color: red; }'
             ^
Unrecognised input
      Error in C:\Users\USER\Projects\less-issuer-test\import.less.js (line 1,column 15)
 @ ./main.less 2:12-125 9:17-24 13:15-29
 @ ./index.js 1:0-21