React-Redux项目：如何通过Node环境变量修改SCSS主题变量？

当然可以！Webpack配合sass-loader就能轻松实现通过Node环境变量动态修改Sass变量，另外还有一些其他工具也能帮你搞定这个需求，我给你拆解几个可行的方案：

方案1：Webpack + sass-loader 动态注入Sass变量 #

这是最直接的方案，通过Webpack的sass-loader把环境变量转成Sass变量注入到样式文件中：

步骤1：配置Webpack #

在你的webpack.config.js中添加sass-loader的配置，读取Node环境变量并注入：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // additionalData会把这段代码注入到每个Sass文件开头
              additionalData: `$theme: ${process.env.THEME || 'default'};`,
            },
          },
        ],
      },
    ],
  },
};

步骤2：在Sass中使用主题变量 #

现在你可以在样式文件里基于$theme变量编写分支样式：

// styles.scss
$default-primary: #2196F3;
$dark-primary: #1976D2;
$light-primary: #BBDEFB;

body {
  background-color: if($theme == 'dark', $dark-primary, 
                      $theme == 'light', $light-primary, 
                      $default-primary);
}

步骤3：启动项目时指定环境变量 #

根据你的操作系统，在终端设置环境变量后启动项目：

# Linux/macOS
THEME=dark npm start

# Windows（PowerShell）
$env:THEME='dark'; npm start

方案2：修复node-sass-utils的castToSass()使用问题 #

你之前尝试用node-sass-utils的castToSass()没成功，大概率是Webpack配置的方式不对。试试这样配置：

步骤1：安装依赖 #

确保安装了兼容版本的依赖：

npm install node-sass-utils node-sass --save-dev

步骤2：配置Webpack的sass-loader函数 #

在Webpack中定义一个Sass函数，通过castToSass()把Node环境变量转成Sass能识别的类型：

// webpack.config.js
const sassUtils = require('node-sass-utils')(require('node-sass'));

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              functions: {
                // 定义一个Sass函数，返回转换后的环境变量
                'get-theme()': () => sassUtils.castToSass(process.env.THEME || 'default'),
              },
            },
          },
        ],
      },
    ],
  },
};

步骤3：在Sass中调用函数 #

现在可以在样式文件里调用这个函数获取主题值：

// styles.scss
$default-primary: #2196F3;
$dark-primary: #1976D2;

$current-theme: get-theme();

body {
  background-color: if($current-theme == 'dark', $dark-primary, $default-primary);
}

注意：如果还是报错，检查node-sass和node-sass-utils的版本兼容性，建议使用两者官方推荐的匹配版本。

方案3：结合CSS变量实现运行时动态切换 #

如果你想要无需重启项目就能切换主题，可以把Sass变量编译成CSS变量，同时用环境变量设置初始主题：

步骤1：Sass中定义CSS变量 #

// styles.scss
// 用环境变量设置初始CSS变量值
:root {
  --primary-color: #{if($theme == 'dark', #1976D2, #2196F3)};
  --text-color: #{if($theme == 'dark', #ffffff, #333333)};
}

body {
  background-color: var(--primary-color);
  color: var(--text-color);
}

步骤2：React中动态修改主题 #

在你的Redux或组件中添加切换主题的逻辑，直接修改CSS变量：

// ThemeSwitcher.jsx
import { useDispatch } from 'react-redux';
import { setTheme } from './themeSlice';

const ThemeSwitcher = () => {
  const dispatch = useDispatch();

  const switchToDark = () => {
    document.documentElement.style.setProperty('--primary-color', '#1976D2');
    document.documentElement.style.setProperty('--text-color', '#ffffff');
    dispatch(setTheme('dark'));
    // 可选：把主题保存到localStorage，下次加载自动恢复
    localStorage.setItem('theme', 'dark');
  };

  const switchToLight = () => {
    document.documentElement.style.setProperty('--primary-color', '#2196F3');
    document.documentElement.style.setProperty('--text-color', '#333333');
    dispatch(setTheme('light'));
    localStorage.setItem('theme', 'light');
  };

  return (
    <div>
      <button onClick={switchToDark}>深色主题</button>
      <button onClick={switchToLight}>浅色主题</button>
    </div>
  );
};

export default ThemeSwitcher;

这种方式既支持通过环境变量设置初始主题，又能在运行时动态切换，体验更流畅。

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