I am using TypeScript with React on Rails.

My SCSS file is in same folder with tsx files and this scss file import all necessary modules. So i have a one big css file at the end.

I also have 42 components. Every component has a html code that renders. So, I import styles in components like this:

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

```

Problem is, my page loads fast. But styles are delayed a bit. At first i see html dom object without styles then styles applied. This wonders me that, **does React loads my scss styles 42 times** or just once and re-use on each components?

If not how can i globally import `styles` and use across all components?

**sample component**

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

...

render() {

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

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

```