如何基于环境变量为LESS设置动态资源路径变量？（Webpack 4环境）

我之前在Webpack 4项目里正好处理过类似的需求，给你分享两种靠谱的解决方案，都能实现根据环境变量动态设置LESS里的@asset-path变量：

方案一：通过less-loader的modifyVars注入变量 #

这种方法最直接，不需要在LESS文件里写任何JS表达式，直接通过Webpack配置把变量值传给LESS。

首先在Webpack配置里读取环境变量，然后配置less-loader的modifyVars选项：

// webpack.config.js
// 读取环境变量，注意要做类型转换，因为process.env的值默认都是字符串
const isInShell = process.env.IN_SHELL === 'true';

module.exports = {
  // ...其他Webpack配置（入口、输出等）
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader', // 你的前缀补全loader
          {
            loader: 'less-loader',
            options: {
              // 直接把计算好的路径传给LESS变量
              modifyVars: {
                'asset-path': isInShell ? '/path/1/' : '/path/2/'
              },
              // 如果你的LESS里没有其他JS表达式，这个可以不用开，但开了也不影响
              javascriptEnabled: true
            }
          }
        ]
      }
    ]
  }
};

然后你的LESS文件里直接使用@asset-path即可，不需要写那个三元表达式：

// 比如引用资源时
background: url('@{asset-path}bg.png');

方案二：用Webpack DefinePlugin全局注入环境变量 #

如果你需要在LESS里直接根据环境变量写逻辑（比如不止这一个变量要判断），可以用Webpack的DefinePlugin把环境变量注入到全局，然后在LESS里直接使用。

首先配置Webpack的插件：

// webpack.config.js
const webpack = require('webpack');
const isInShell = process.env.IN_SHELL === 'true';

module.exports = {
  // ...其他Webpack配置
  plugins: [
    new webpack.DefinePlugin({
      // 注意要用JSON.stringify，否则会把变量当成代码片段解析
      'process.env.IN_SHELL': JSON.stringify(isInShell)
    })
  ],
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'less-loader',
            options: {
              // 必须开启这个选项，LESS才允许解析JS表达式
              javascriptEnabled: true
            }
          }
        ]
      }
    ]
  }
};

这时你的LESS文件里就可以保留原来的写法了：

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

// 使用示例
.logo {
  background-image: url('@{asset-path}logo.svg');
}

补充：环境变量的跨平台设置 #

为了在Windows和Linux/macOS上都能正常设置环境变量，推荐用cross-env包。先安装它：

npm install cross-env --save-dev

然后在package.json的scripts里设置不同的构建命令：

{
  "scripts": {
    "build:shell": "cross-env IN_SHELL=true webpack",
    "build:normal": "cross-env IN_SHELL=false webpack"
  }
}

之后运行npm run build:shell就是用/path/1/，运行npm run build:normal就是用/path/2/。

内容的提问来源于stack exchange，提问作者nanobar