Webpack 在较少的加载程序中导入全局变量

在我的webpack配置中，我希望能够定义一个全局less变量文件，该文件将包含在每个less组件中

使用sass加载器，您可以提供以下选项：

loaderOptions: {
    data: "@import 'globals.sass'"
}

使用较少的加载程序，我可以找到的唯一选项是globalVars：

loaderOptions: {
    globalVars: {}
}

---

现在，这一切正常，但globalVars需要一个具有键值对的对象。我宁愿有一个主题。少的地方是附加的每一个组成部分。使用更少的加载器可以实现这一点吗？

我建议将

更少的加载器

链接到

文本转换加载器

，如下所示：

rules: [{
     test: /\.js$/,
     use: [
         { 
            loader: 'less-loader',
            options: //your normal options
         },
         { 
            loader: 'text-transform-loader',
            options: {
               prependText: '@import "../styles/theme.less"'
            }
         }
     ]
}]

请记住，最后一个Web包加载程序是首先应用的，因此您可能希望将此加载程序用作链中的最后一个加载程序。如果较少的文件嵌套在不同的深度，这很可能会中断，因为主题文件相对于每个文件的深度不同。如果是这样，您可以将主题文件的全部内容附加到每个较小的文件中

从这个规则中排除

主题.less

文件也是一个好主意，否则您可能会得到一些奇怪的无限递归

有关详细信息，请参阅。

我就是这样做的：

rules: [{
    test: /\.less$/,
    use: [{
        loader: 'less-loader',
        options: {
            javascriptEnabled: true
        }
    },
        {
            loader: 'style-resources-loader',
            options: {
                patterns: [
                    path.resolve(__dirname, 'src/application/less/variables.less'),
                    path.resolve(__dirname, 'src/application/less/flex.less'),
                    path.resolve(__dirname, 'src/application/less/functions.less'),
                ]
            }
        }]
}]