如何将.env变量传递至.scss文件？（React+Webpack环境）

嘿，这个需求完全可以实现！我来一步步帮你搞定在自定义Webpack环境下，把.env里的配置变量传递到.scss文件中，轻松切换本地和服务器的字体路径。

步骤1：配置dotenv加载环境变量 #

首先确保你的项目里已经安装了dotenv，如果还没装的话先执行：

npm install dotenv --save-dev
# 或者用 yarn
yarn add dotenv --dev

然后在你的Webpack配置文件（比如webpack.config.js）的最顶部添加dotenv的加载代码，这样Webpack就能读取到.env里的变量：

// webpack.config.js
require('dotenv').config({
  // 可选：根据环境加载不同的.env文件，本地用.env.local，生产用.env.production
  path: process.env.NODE_ENV === 'production' ? './.env.production' : './.env.local'
});

module.exports = {
  // 你的Webpack配置...
}

接下来在项目根目录创建对应的.env文件：

• 本地环境（.env.local）：

PUBLIC_PATH=/

• 生产服务器环境（.env.production）：

PUBLIC_PATH=/shop/

步骤2：修改Webpack的sass-loader配置 #

我们需要通过sass-loader的additionalData（旧版本用prependData）选项，把环境变量注入为全局的Sass变量，这样所有.scss文件都能直接使用它。

在Webpack的module.rules中找到处理scss的规则，修改成这样：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他loader（比如babel-loader）
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 把CSS注入到DOM
          'css-loader', // 解析CSS
          {
            loader: 'sass-loader',
            options: {
              // 注入全局Sass变量
              additionalData: `$public-path: "${process.env.PUBLIC_PATH}";`,
              // 如果你的sass-loader版本低于v10，用prependData代替additionalData
              // prependData: `$public-path: "${process.env.PUBLIC_PATH}";`,
            },
          },
        ],
      },
    ],
  },
};

步骤3：在.scss文件中使用变量修改字体路径 #

现在你可以在任意.scss文件里直接使用$public-path变量来拼接字体URL了。比如原来的字体引用：

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/font.ttf') format('truetype');
}

改成：

@font-face {
  font-family: 'MyFont';
  src: url('#{$public-path}fonts/font.ttf') format('truetype');
}

这样本地环境下，路径会变成/fonts/font.ttf；生产构建时，就会自动变成/shop/fonts/font.ttf啦。

一些注意事项 #

• 确保Webpack启动/构建时的环境模式正确：可以在package.json的scripts里设置：

  "scripts": {
    "start": "NODE_ENV=development webpack serve",
    "build": "NODE_ENV=production webpack"
  }
  

• 如果你的环境变量需要被React组件也用到，记得在变量名前加上REACT_APP_前缀（比如REACT_APP_PUBLIC_PATH），不过纯.scss使用的话不需要这个前缀。
• 测试一下本地启动和生产构建后的CSS文件，确认路径是否符合预期。

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