Using less-plugin-glob with Webpack

Question

I am trying to migrate the build system for an existing project from gulpto webpack.

It currently has a single .less entry point file that imports various other files as follows:

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

Here one css file is written, which contains all the found .less files. It uses https://github.com/just-boris/less-plugin-glob to enable globes.

In Webpack, I tried to use a combination less-loader, css-loaderand style-loaderto achieve the same. Part of modulesmy webpack configuration is as follows:

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

and I am trying to require that my entry file be smaller:

require('./app.less');

but no matter what I do, I get the following:

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

, intendend-, paths createWebpackLessPlugin, , less-plugin-glob. , createWebpackLessPlugin .

, , paths, less-plugin-glob.

: https://github.com/notagency/webpack2-with-less-plugin-glob