Search code examples
webpacklesswebpack-2

Webpack import multiple less files using glob expressions?

I have been trying to import less files automatically using webpack's less-loader, but glob expressions don't work in root.less file.

In detail, I am replacing gulp builder with webpack and I can use this pattern: 

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

to import less files in gulp automatically (Please check this link glob expressions). However, this pattern is not valid in webpack and less-loader seems that do not support as well.

I tried to use require.context the method of webpack, but I cannot adjust the order or file imports. I need to require less files in a logical sequence because I use global variables(mixins, color codes etc). So, this option is not available as well.

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

So, it seems I have to import each file manually which is really painful. That's why I wonder that is there any way to import files automatically?

Thank you for any help!

Solution

  • I've added paths option and it works:

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

    More details here: https://stackoverflow.com/a/43621947/2393499

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