Webpack 使用 glob 表达式导入多个 less 文件？

Question

我一直在尝试使用 webpack 的 less-loader 自动导入 less 文件，但是 glob 表达式在 root.less 文件中不起作用。

详细来说，我正在用 webpack 替换 gulp 构建器，我可以使用这个模式：

@import 'widgets/**/*.less';

自动导入gulp中的较少文件（请检查这个link glob expressions). However, this pattern is not valid in webpack and less-loader似乎也不支持。

我尝试使用require.contextwebpack的方法，但是无法调整顺序或文件导入。我需要按逻辑顺序需要更少的文件，因为我使用全局变量（mixins、颜色代码等）。所以，这个选项也不可用。

import '../components/variables.less'; 
importAll(require.context('../components/', true, /\.less$/)); // Cannot set a sequence. 
// 'Variables' cannot be found even though I added it above

所以，看来我必须手动导入每个文件，这真的很痛苦。这就是为什么我想知道有什么方法可以自动导入文件吗？

感谢您的帮助！

Answer 1

我找不到合适的 glob 模式路径解决方案，但我决定动态创建无条目文件。遇到此问题的任何人都可以考虑以下解决方案：

   // update entry less file
var dir = require('node-dir');

function updateEntryLessFile() {
    dir.readFiles(path.resolve(__dirname, 'path-for-less-files-folder'), {
        match: /.less$/
    },
    (err, context, next) => { next() },
    (err, files) => {
        if (err) throw err;
        var wstream = fs.createWriteStream(
            path.resolve(__dirname, 'path-to-entry/entry.less')
        );
        _.each(files, path => {
            const relativePath = path.split('client/')[1]; // get relative path from full path
            wstream.write(`@import '~${relativePath}';\n`);
        });
        wstream.end();
    });
}

// When less files are added or removed, it updates entry.less file.
var watcher = require('chokidar').watch(path.resolve(__dirname, 'client/'), {
  persistent: true,
  ignoreInitial: true
});

// Something to use when events are received.
var log = console.log.bind(console);
// Add event listeners.
watcher
  .on('add', path => {
      if (new RegExp('.less').test(path)) {
          log(`Less file: ${path} has been added`)
          updateEntryLessFile();
      }
  })
  .on('unlink', path => {
      if (new RegExp('.less').test(path)) {
          log(`Less file: ${path} has been removed`)
          updateEntryLessFile();
      }
  });

updateEntryLessFile();

因此，您可以运行在您的 webpack 构建之前或在您的 webpack 配置中这样做。

如果您发现更好的方法，请随时post吧！谢谢

Answer 2

我添加了 paths 选项并且有效：

...
{
    loader: 'less-loader',
    options: {
        paths: [
            path.resolve(path.join(__dirname, 'app'))
        ],
        plugins: [
            require('less-plugin-glob')
        ]
    }
}

此处有更多详细信息：

工作示例：https://github.com/notagency/webpack2-with-less-plugin-glob

Webpack 使用 glob 表达式导入多个 less 文件？

Webpack import multiple less files using glob expressions?

less

webpack

webpack-2