Question

我将TypeScript与React on Rails一起使用。

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

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

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

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

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

示例组件

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

...

render() {

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

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

Answer 1

React会加载我的scss样式42次

我刚刚做了实验，答案是否定的。尽管这样，仍然不建议将所有样式都放在文件中。我认为您应该将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>
}

另一种是模块样式，仅由一个组件或很少的组件使用，它应该只包括仅在目标组件中使用的样式，它通常很小，并且与该组件具有相同的名称。 / p>

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

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

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

如果要将全局样式和模块样式混合在同一元素中，则可以使用classnames npm或类似的方法：

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

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

Answer 2

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

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

Answer 3

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

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

3 个答案: