How to Import sass file to single components in React

Question

I think it might be silly question to ask but trust me I am in trouble and frustrated . Actually I have two components one is Home and second is Dashboard . I created two sass file for individuals components mean one for home and second is for dashboard. For Home it working fine but when I include sass file into dashbaord component then it break home page component style . How to fix this issue . I want to implement it separately, it should be independent.

I also used react-router so please help me to achieve my goal

@CecilJohnTantay I created fiddle, please have a look ( code ) — Sami
– Sami, Commented Oct 15, 2019 at 18:13

Mijan Karim · Accepted Answer · 2019-10-15 18:57:18Z

2

You can implement independent sass file to react component by using Sass css modules.

You have to create two sass files Home.module.scss and Dashboard.module.scss

.btn {
  color:red;
}

You can import like this .

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

where btn is the class name you have in sass files.

Then you can use that class in component like this .

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

This way you can use sass file independently . Let me know if need more explanation .

edited Oct 15, 2019 at 18:57

answered Oct 15, 2019 at 18:52

Mijan Karim

293 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Sami Over a year ago

How to import all classes from Sass file ?

Mijan Karim Over a year ago

You can do like this import {class1, class2, class3} from "./Home.module.scss";

Mijan Karim Over a year ago

Or you can use destructuring .

Sami Over a year ago

if I have thousand class in file then I will do like this ?

Mijan Karim Over a year ago

import styles from "./Home.module.scss"; Then use like this. <a className={styles.btn}> Button </a>

|

cjbt · Accepted Answer · 2019-10-15 18:05:15Z

1

I'm going to assume you installed sass by installing node-sass.

All you need to do is to import them into a component that needs sass at the top of the js file.

import './dashboard.scss'

answered Oct 15, 2019 at 18:05

cjbt

3441 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to Import sass file to single components in React

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related