使用 less-plugin-glob 和 Webpack

Question

使用 less-plugin-glob 和 Webpack

5

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

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

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

这将写出一个包含所有 .less 文件的单个 css 文件。它使用 https://github.com/just-boris/less-plugin-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] }}
    ]
},

我正在尝试像这样引入我的“entry” less 文件：

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'

请问有人能指点我正确的方向吗？

- Matt Wilson

嘿，我遇到了同样的问题http://stackoverflow.com/questions/43527423/webpack-import-multiple-less-files-using-glob-expressions。你已经找到解决方案了吗？ - Semih Gokceoglu

很抱歉，@Semih Gk，我最终只列出了文件，并打算稍后再回来处理它... - Matt Wilson

感谢 @Math Wilson。嗯，到目前为止我还没有找到一个好的解决方案，但至少我找到了一种方法。除非你找到更好的方法，你可以考虑使用我在问题下面发布的方法。 - Semih Gokceoglu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dmitry · Accepted Answer

我已经这样使它工作起来了：

...
{
    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