在less-loader中导入全局变量

问题描述 投票:3回答:2

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

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

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

我可以用less-loader找到的唯一选项是globalVars:

loaderOptions: {
    globalVars: {}
}

现在,这可以正常工作,但globalVars期望一个具有键值对的对象。我宁愿有一个theme.less某处附加每个组件。这可能与较少的装载机有关吗?

webpack css-loader less-loader
2个回答
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


0
投票

这就是我的方式:

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'),
                ]
            }
        }]
}]
© www.soinside.com 2019 - 2024. All rights reserved.