Как импортировать файл sass в отдельные компоненты в React

Question

Я думаю, что это глупый вопрос, но, поверьте мне, я в беде и разочарован. На самом деле у меня есть два компонента, один Home, а второй Dashboard. Я создал два файла sass для отдельных компонентов, то есть один для home, а второй для dashboard. Для Home это работает нормально, но когда я включаю sass-файл в компонент dashbaord, он нарушает стиль компонента home page. Как исправить эту проблему. Я хочу реализовать это отдельно, оно должно быть независимым.

Я также использовал реактив-маршрутизатор, поэтому, пожалуйста, помогите мне достичь моей цели

Answer 1

Вы можете реализовать независимый файл sass для реагирования компонента, используя модули Sass css.

Вам необходимо создать два файла sass Home.module.scss и Dashboard.module.scss

.btn {
  color:red;
}

Вы можете импортировать следующим образом.

import {btn} from "./Home.module.scss";
import {btn} from "./Dashboard.module.scss";

, где btn - это имя класса, которое вы имеете в файлах sass.

Затем вы можете использовать этот класс в таком компоненте, как этот.

<a className={btn}> Button </a>

Таким образом, вы можете использовать файл sass независимо друг от друга. Дайте мне знать, если нужно больше объяснений.

Answer 2

Я предполагаю, что вы установили sass, установив node-sass.

Все, что вам нужно сделать, это импортировать их в компонент, для которого требуется sass в верхней части файла js.

import './dashboard.scss'