在 React 上的多个组件中导入样式答案

【问题标题】：Importing styles in multiple components on React在 React 上的多个组件中导入样式
【发布时间】：2025-12-19 01:25:20
【问题描述】：

我正在使用带有 React on Rails 的 TypeScript。

我的 SCSS 文件与 tsx 文件位于同一文件夹中，此 scss 文件导入所有必要的模块。所以我最后有一个很大的 css 文件。

我也有 42 个组件。每个组件都有一个呈现的 html 代码。所以，我在这样的组件中导入样式：

import * as styles from 'main.module.scss';

问题是，我的页面加载速度很快。但是样式有点延迟。起初我看到没有样式的 html dom 对象，然后应用了样式。这让我很奇怪，React 会加载我的 scss 样式 42 次strong>还是只加载一次并在每个组件上重复使用？

如果不是，我如何全局导入 styles 并在所有组件中使用？

示例组件

import * as styles from 'main.module.scss';

...

render() {

  return (
    <div className={styles.container}>

       <div className={styles.pageInner}>
          content...
       </div>
    </div>
  )
}

【问题讨论】：

只需要在顶层js文件中导入全局样式，例如app.js，只需要在每个组件中每次都加载的模块css。
TypeScript 是严格的，所以当我在顶层导入时，子组件看不到样式变量。我需要一直导入
你能粘贴一些代码来展示你如何在组件中使用样式吗？我猜你混合了全局 css 和模块 css。
添加了一个示例用法
顺便说一句，它是main.module.scss，我用打字扩展名导出样式

标签： reactjs typescript

【解决方案1】：

React 会加载我的 scss 样式 42 次p>

我刚刚做了实验，答案是否定的。尽管如此，仍然不建议将所有样式都放在一个文件中。我认为您应该将您的main.module.scss 分成许多小文件。

有 2 种 CSS 样式。

一个是全局样式，被多个组件共享，比如你定义在global.scss文件中，这个文件只需要在最顶层的js文件中导入一次。

// global.scss
.container {
  padding: 10px;
}

// applicaiton.js
import "global.scss"

// ExampleComponent.jsx, don't need to import "global.scss"
// className should be the string
...
render() {
  return <div className='container'>example</div>
}

另一种是只被一个组件或极少数组件使用的模块样式，它应该只包含只在目标组件中使用的样式，它通常很小并且与组件同名。

// ExampleComponent.module.scss
.container {
  margin: 10px;
}

 // ExampleComponent.jsx
import * as styles from 'ExampleComponent.module.scss'

...
render() {
  return <div className={styles.container}>Example</div>
}

如果你想在同一个元素中混合使用全局样式和模块样式，可以使用classnamesnpm 或者这样：

 // ExampleComponent.jsx
import * as styles from 'ExampleComponent.module.scss'

...
render() {
  return <div className={`container ${styles.container}`}>Example</div>
}

【讨论】：

明白了。我使用模块是因为 1）它混淆/缩短了类名。（有助于大小+加载时间） 2）我生成类型，以便 styles.classN styles.container 这样我的 IDE 知道它是
据我了解，没有。

【解决方案2】：

您是否使用 webpacker 或类似的 gem 来管理这个？ Webpack 足够聪明，可以重用导入 - 它不会多次包含它。

也就是说，由于 CSS 是全局性的，所以无论如何您只需要在顶层导入一次 main.scss。

【讨论】：

是的，我正在使用 webpacker。 TypeScript 很严格，所以当我在顶层导入时，子组件看不到样式变量。我需要一直导入。
“打字稿这么严格”是什么意思？你是如何编写代码的（TS 不应该对 sass 变量有任何了解）。

【解决方案3】：

由于您使用的是 webpack，因此一种选择是将 Scss 编译为纯 CSS 并将其作为样式表包含在根 HTML 页面中，最有可能的是 index.html

【讨论】：