在less-loader中导入全局变量

Question

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

使用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加载器是首先应用的，所以您可能希望使用这个加载器作为链中的最后一个加载器。如果你的较少的文件嵌套在不同的深度，这可能会很好地打破，因为这样你的主题文件相对于每个文件将处于不同的深度。如果是这种情况，您可以将主题文件的整个内容添加到每个较少的文件中！

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

详情请参见https://github.com/kmck/webpack-text-transform-loader。

Answer 2

这就是我所做的：

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'),
                ]
            }
        }]
}]