如何在生产中使用React动态导入SCSS文件？

Question

一些背景：

我正在构建我的第一个大型 React 应用程序，并且我决定同时使用

SASS

+

Bootstrap

。由于我的项目的设置方式，我在动态更改页面的配色方案时遇到了麻烦。我的第一个想法是尝试即时请求文件，如下面的代码所示。

但是，这仅适用于我的开发服务器，不适用于我的生产版本。我有更好的方法可以解决这个问题吗？

index.js

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

import { getLocalValue, setLocalValue, removeLocalValue } 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);

  // Load the current theme from LocalStorage
  useEffect(() => {
    if (getLocalValue("theme")) setTheme(getLocalValue("theme"));
    setLoaded(true);
  }, []);

  // Apply the theme by dynamically requiring it
  useEffect(() => {
    require(`./styles/${theme}.scss`);
  }, [theme])

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

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <App />
)

light.scss（部分）

$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;
}

一些注意事项：

在过去的几天里我已经采取了一些步骤进行调试，但没有效果。其中包括：

• 使用标准

  CSS

  变量，而不是

  SASS

  变量（

  Bootstrap

  的主题不会改变，并且这些主题在

  className

  属性中与我的网站紧密集成）
• 通过 JS 更改

  SASS

  变量（不可能，因为它们是预编译的）
• 动态要求/导入

  SCSS

  文件（在生产中不起作用，而且奇怪的是，如果我使用

  import <file>

  ，我会收到语法错误，但当我使用

  import(<file>)

  时则不会。

我还花了无数个小时在互联网上搜索可以修改

Bootstrap

主题的解决方案，但我还没有找到解决方案。

我的问题：

有什么办法可以达到这个效果吗？

Answer 1

可能最好的方法是首先确保 scss 文件被编译成 css。然后确保它们与您的项目一起托管或在 CDN 上。

您可以通过多种方式动态导入样式表。例如，您可以在组件上返回 ，其中 cssSource 是指向托管 css 文件的字符串。当然还有其他方法，但它们都会使用类似的添加链接样式表的方法。

参见：使用 React 动态加载样式表