React 18.2.0中为何所有SCSS文件会被全局加载？

我使用React 18.2.0，代码结构如下：

Onboarding.jsx #

import "../../styles/screens/_onboarding.scss";

export default function Onboarding({ setPaymentSuccess }) {
  return (
    <div className="card">
      <div className="banner"></div>
      <div className="content">
        <div className="logo">
          <img src={logo} alt="" />
        </div>

CreateAccount.jsx #

import "../../styles/screens/_createAccount.scss";

export default function CreateAccount() {
  return (
    <div className="card">
      <div className="banner"></div>
      <div className="content">
        <div className="logo">
          <img src={logo} alt="" />
          <span className="caption">Baker's Fifa Snipe Bot</span>
        </div>

        <div className="hairline"></div>
        <div className="text-content">
          <div className="text-caption">Terms of Service</div>
          <div className="text-paragraph">
            <span className="link">Continue reading...</span>
          </div>
        </div>

Purchase.jsx #

import "../styles/pages/_purchase.scss";

export default function Purchase() {
  const [paymentSuccess, setPaymentSuccess] = useState(false);
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <div className="wrapper">
      <div className="container">
        {!paymentSuccess && (
          <Onboarding setPaymentSuccess={setPaymentSuccess} />
        )}
        {paymentSuccess && <CreateAccount />}
      </div>
    </div>
  );
}

无论加载Onboarding还是CreateAccount组件，所有样式表都会被加载，请问问题出在哪里？

这是因为Webpack（或你使用的构建工具）会在编译阶段就处理所有导入的样式文件，将它们打包到最终输出中，和组件是否被条件渲染无关。只要样式文件被组件导入，不管组件有没有实际渲染，样式都会被加载并注入页面。

可以通过以下方式解决：

• 使用CSS Modules：将样式文件命名为[name].module.scss，通过模块化方式导入，样式会被限定在组件内部，避免全局污染，同时构建工具会按需处理样式作用域：

  // Onboarding.jsx
  import styles from "../../styles/screens/_onboarding.module.scss";
  
  // 使用样式
  <div className={styles.card}>...</div>
  

• 动态导入样式：在组件挂载时动态导入样式文件，只有组件被渲染时才会加载对应样式：

  // Onboarding.jsx
  import { useEffect } from 'react';
  
  export default function Onboarding({ setPaymentSuccess }) {
    useEffect(() => {
      import("../../styles/screens/_onboarding.scss");
    }, []);
  
    return (
      // 组件内容
    )
  }
  

  注意：需要确保构建工具支持动态导入，若需要样式卸载逻辑，可在组件卸载时移除对应的样式标签。

• 使用CSS-in-JS方案：比如Styled Components、Emotion等，样式与组件绑定，只有组件渲染时才会生成并注入对应的样式规则。

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