在less-loader中导入全局变量

Question

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

使用 sass-loader 您可以提供以下选项：

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

我能用 less-loader 找到的唯一选项是 globalVars：

loaderOptions: {
    globalVars: {}
}

现在，这一切正常，但是 globalVars 需要一个带有键值对的对象。我宁愿在每个组件都附加一个 theme.less 。使用 less-loader 可以做到吗？

Answer 1

我建议将您less-loader与链接起来text-transform-loader，如下所示：

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

请记住，最后一个 webpack 加载器首先被应用，因此您可能希望将其用作链中的最后一个加载器。如果您的 less 文件嵌套在不同的深度，这很可能会被破坏，因为这样您的主题文件将相对于每个文件处于不同的深度。如果是这种情况，您可以将主题文件的全部内容附加到每个 less 文件中！

将您的文件从该规则中排除也是一个好主意theme.less，否则您可能会得到一些奇怪的无限递归。

有关详细信息，请参阅https://github.com/kmck/webpack-text-transform-loader。