通过环境变量传递的 LESS 变量

Question

我想在 LESS 中有一个基于环境变量的变量：

@asset-path: process.env.IN_SHELL ? '/path/1/' : '/path/2/'

因为我的资产路径根据加载应用程序的上下文而不同。

我正在使用带有最新 less、less-loader、style-loader 和 postcss-loader（用于供应商前缀）的 webpack (v4)。谢谢

Answer 1

您不能在 LESS 中使用 javascript 函数。逻辑需要在您的 webpack 配置中。
我想我会使用 string-replace-loader 作为 LESS 文件的第一个加载器，并替换正确路径的占位符。

像这样：

{
    test: /\.less$/,
    use: [
        'style-loader',
        'postcss-loader',
        'less-loader',
        {
            loader: 'string-replace-loader',
            options: {
                search: 'PATH-PLACEHOLDER',
                replace: process.env.IN_SHELL ? '/path/1/' : '/path/2/',
            },
        },
    ],
},

Answer 2

您可以在 LessLoader 中使用 modifyVars 功能

modifyVars : { 'asset-path': process.env.IN_SHELL ? '/path/1/' : '/path/2/'}

通过环境变量传递的 LESS 变量

LESS variable passed via environment variable

javascript

less

webpack