如何在React生产环境中动态导入SCSS文件？

针对你用React+SASS+Bootstrap遇到的动态主题切换生产环境失效问题，这里有两种可靠的实现方案：

方案一：预编译多主题，通过根元素类名切换 #

这种方法让Webpack预编译所有主题样式，然后通过切换根元素的类名来激活对应主题，完全兼容生产环境。

1. 重构主题SCSS文件 #

修改light.scss和其他主题文件，将变量和Bootstrap导入包裹在主题类选择器内：

// light.scss
.light-theme {
  $primary:   #4077AA;
  $secondary: #D0D0D0;
  $light:     $F0F0F0;
  $dark:      #333333;
  $success:   #4CAF50;
  $danger:    #FF6F61;

  $theme-colors: (
    primary:   $primary,
    secondary: $secondary,
    light:     $light,
    dark:      $dark,
    success:   $success,
    danger:    $danger
  );

  @import "~bootstrap/scss/bootstrap.scss";

  // 自定义样式也放在类内
  #root {
    min-height: 100vh;
    overflow-x: hidden;
  }

  .main {
    width: 100vw;
    max-width: 100%;
    padding: 0;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
}

同理创建dark.scss，仅修改变量值即可。

2. 统一导入所有主题 #

在主样式文件（比如critical.scss）中导入所有主题文件：

// critical.scss
@import "./light.scss";
@import "./dark.scss";
// 其他主题文件也一并导入

3. 修改React代码切换类名 #

去掉动态require的逻辑，改为操作根元素的类名：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./styles/critical.scss"; // 这里已经包含所有主题

import { getLocalValue, setLocalValue } from "./utils/settings.js";

import Home from "./home/home";
import Chat from "./chat/chat";

export default function App() {
  const [theme, setTheme] = useState("light");
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const savedTheme = getLocalValue("theme") || "light";
    setTheme(savedTheme);
    // 初始化设置根元素类名
    document.documentElement.className = `${savedTheme}-theme`;
    setLoaded(true);
  }, []);

  // 切换主题的方法（可暴露给子组件调用）
  const toggleTheme = (newTheme) => {
    setTheme(newTheme);
    setLocalValue("theme", newTheme);
    document.documentElement.className = `${newTheme}-theme`;
  };

  return (
    <BrowserRouter>
      {!loaded ? (
        <div className="loading-container">
          <div className="loading">
            <h2>Loading...</h2>
          </div>
        </div>
      ) : (
        <Routes>
          <Route path="/" element={<Home toggleTheme={toggleTheme} />}></Route>
          <Route path="/chat" element={<Chat toggleTheme={toggleTheme} />}></Route>
        </Routes>
      )}
    </BrowserRouter>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />)

方案二：CSS变量映射Bootstrap SASS变量 #

这种方法通过将SASS变量映射到CSS自定义属性，然后动态修改CSS变量值来切换主题，无需切换类名，更灵活。

1. 定义全局CSS变量和SASS映射 #

创建variables.scss文件：

// variables.scss
:root {
  --primary: #4077AA;
  --secondary: #D0D0D0;
  --light: #F0F0F0;
  --dark: #333333;
  --success: #4CAF50;
  --danger: #FF6F61;
}

// 将CSS变量映射为SASS变量
$primary: var(--primary);
$secondary: var(--secondary);
$light: var(--light);
$dark: var(--dark);
$success: var(--success);
$danger: var(--danger);

$theme-colors: (
  primary:   $primary,
  secondary: $secondary,
  light:     $light,
  dark:      $dark,
  success:   $success,
  danger:    $danger
);

2. 导入变量并编译Bootstrap #

在主样式文件中导入变量和Bootstrap：

// critical.scss
@import "./variables.scss";
@import "~bootstrap/scss/bootstrap.scss";

// 自定义样式
#root {
  min-height: 100vh;
  overflow-x: hidden;
}

.main {
  width: 100vw;
  max-width: 100%;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

3. 动态修改CSS变量 #

在React中通过JS修改:root的CSS变量：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./styles/critical.scss";

import { getLocalValue, setLocalValue } from "./utils/settings.js";

import Home from "./home/home";
import Chat from "./chat/chat";

// 定义主题配置
const themes = {
  light: {
    primary: "#4077AA",
    secondary: "#D0D0D0",
    light: "#F0F0F0",
    dark: "#333333",
    success: "#4CAF50",
    danger: "#FF6F61"
  },
  dark: {
    primary: "#2c5a8a",
    secondary: "#a0a0a0",
    light: "#333333",
    dark: "#f0f0f0",
    success: "#3d8b40",
    danger: "#e55d50"
  }
};

export default function App() {
  const [theme, setTheme] = useState("light");
  const [loaded, setLoaded] = useState(false);

  // 应用主题变量
  const applyTheme = (themeName) => {
    const root = document.documentElement;
    const themeVars = themes[themeName];
    Object.entries(themeVars).forEach(([key, value]) => {
      root.style.setProperty(`--${key}`, value);
    });
  };

  useEffect(() => {
    const savedTheme = getLocalValue("theme") || "light";
    setTheme(savedTheme);
    applyTheme(savedTheme);
    setLoaded(true);
  }, []);

  // 切换主题方法
  const toggleTheme = (newTheme) => {
    setTheme(newTheme);
    setLocalValue("theme", newTheme);
    applyTheme(newTheme);
  };

  return (
    <BrowserRouter>
      {!loaded ? (
        <div className="loading-container">
          <div className="loading">
            <h2>Loading...</h2>
          </div>
        </div>
      ) : (
        <Routes>
          <Route path="/" element={<Home toggleTheme={toggleTheme} />}></Route>
          <Route path="/chat" element={<Chat toggleTheme={toggleTheme} />}></Route>
        </Routes>
      )}
    </BrowserRouter>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />)

为什么原方案生产环境失效？ #

Webpack在生产构建时会进行静态依赖分析，动态require(./styles/${theme}.scss)这种写法属于动态导入，Webpack无法提前确定要打包哪些文件，要么只打包部分主题，要么完全不打包，导致生产环境无法加载对应样式。而上面两种方案都是让Webpack提前预编译所有主题相关代码，避免了动态加载的问题。

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