在 Webpack 中使用 less-plugin-glob

Question

我正在尝试将现有项目的构建系统从 gulp 迁移到 webpack。

它目前有一个单一的入口点 .less 文件，它可以导入各种其他文件，如下所示：

@import 'bower_components/bootstrap/less/bootstrap.less';
@import 'components/**/*.less';

这会写出一个包含所有找到的 .less 文件的 css 文件。它使用https://github.com/just-boris/less-plugin-glob 来允许glob。

在 Webpack 中，我已经尝试使用 less-loader、css-loader 和 style-loader 的组合来实现相同的目标。我的 webpack 配置的 modules 部分如下所示：

var lessPluginGlob = require('less-plugin-glob');
...
{
    test: /\.less$/,
    use: [
      'style-loader',
      { loader: 'css-loader', options: { importLoaders: 1 } },
      { loader: 'less-loader', options: { lessPlugins: [lessPluginGlob] }}
    ]
},

我试图要求我的“条目”更少的文件，如下所示：

require('./app.less');

但无论我做什么，我都会得到这个：

ERROR in ./~/css-loader?{"importLoaders":1}!./~/less-loader?{"lessPlugins":[{}]}!./app/app.less
Module build failed: Can't resolve './components/**/*.less' in '/Users/matt/web-app/app'

谁能指点我正确的方向？

Answer 1

我让它像这样工作：

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

查看源代码：https://github.com/webpack-contrib/less-loader/blob/master/src/getOptions.js#L22

我不知道这是否是一种预期的行为，但如果paths 未指定createWebpackLessPlugin 在less-plugin-glob 插件之前首先执行。它会抛出一个错误，因为createWebpackLessPlugin 对下一个插件一无所知。

所以我的解决方案是简单地指定paths 以使less-plugin-glob 首先执行。

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