Webpack使用glob表达式导入多个较少的文件? [英] Webpack import multiple less files using glob expressions?

问题描述

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

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

详细来说，我将用webpack替换gulp生成器，并且可以使用以下模式:

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

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

以自动导入gulp中的较少文件(请检查此链接全局表达式).但是，此模式在webpack中无效，并且 less-loader 似乎不支持也一样

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.

我尝试使用 require.context 这种webpack的方法，但是我无法调整顺序或文件导入.我需要按逻辑顺序减少文件的数量，因为我使用了全局变量(mixins，颜色代码等).因此，该选项也不可用.

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?

谢谢您的帮助！

推荐答案

我添加了paths选项，它可以正常工作:

I've added paths option and it works:

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

此处有更多详细信息: https://stackoverflow.com/a/43621947/2393499

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

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

这篇关于Webpack使用glob表达式导入多个较少的文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！