Как импортировать модуль s css один раз для приложения «дырявая реакция»?

Question

, так что это моя структура папок

src/
├── Components
│   ├── App
│   │   ├── App.js
│   │   └── App.scss
│   └── Homepage
│       ├── Homepage.js
│       └── Homepage.scss
├── index.js
└── styles
    ├── _buttons.scss
    ├── _config.scss
    └── index.css

В каталоге стилей у меня есть некоторые часто используемые css, и я импортирую все модули внутри компонента App. js, используя @import. Проблема в том, что я должен снова включить их в компонент Homepage. js. Есть ли способ преодолеть эту проблему?

Answer 1

Создайте файл _main.scss и импортируйте туда все остальные файлы стилей.

@import './Components/App/App.scss';
@import './Components/Homepage/Homepage.scss';
@import './styles/_buttons.scss';
...

Редактировать: Импортируйте файл _main.scss в файлы .js, где вам нужно. Вы также можете создавать различные файлы в зависимости от того, что вам нужно. Например:

_for_components.scss

@import './styles/_buttons.scss';
@import './styles/_config.scss';
@import './styles/index.css';

_for_styles.scss

@import './Components/App/App.scss';
@import './Components/Homepage/Homepage.scss';