在less-loader中导入全局变量答案

【问题标题】：Import global variables in less-loader在less-loader中导入全局变量
【发布时间】：2018-08-29 10:23:26
【问题描述】：

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

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

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

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

loaderOptions: {
    globalVars: {}
}

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

【问题讨论】：

标签： webpack css-loader less-loader

【解决方案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 文件中！

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

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

【讨论】：

【解决方案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'),
                ]
            }
        }]
}]

【讨论】：

【解决方案3】：

在更少的选项下有两种方法可以做到这一点：

附加数据

additionalData: (content, loaderContext) => {
     return `@import '~@/global.less';${content}`
}

少选项

lessOptions: {
     modifyVars: {
          // you should config resolve alias option for @
          [any key name you like]: `true;@import'~@/global.less';`,
     },
}

它们是相同的结果和原理，只是additionalData可以prepend或append，而modifyVars只能append。更多详情请见less-loader source code。

【讨论】：