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, Oct 15 '19 at 18:13
all I see is an App component that is importing `./App.css`. That should be scss. can you do it on codesandbox instead? — C. J. Tantay, Oct 15 '19 at 18:17
@CecilJohnTantay `./App.css` file have style and it does not applied on dashboard component — Sami, Oct 15 '19 at 18:19
Can you post a snippet of your Dashboard component and your Home component? Edit your original post — C. J. Tantay, Oct 15 '19 at 18:22

Mijan Karim · Answer 1 · 2019-10-15T18:57:18.627

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 '19 at 18:57

answered Oct 15 '19 at 18:52

Mijan Karim

29
2

How to import all classes from Sass file ? – Sami Oct 15 '19 at 19:01
You can do like this import {class1, class2, class3} from "./Home.module.scss"; – Mijan Karim Oct 15 '19 at 19:04
1

Or you can use destructuring . – Mijan Karim Oct 15 '19 at 19:04
if I have thousand class in file then I will do like this ? – Sami Oct 15 '19 at 19:04
No, you can use destructuring . – Mijan Karim Oct 15 '19 at 19:05
2

import styles from "./Home.module.scss"; Then use like this. Button – Mijan Karim Oct 15 '19 at 19:06
can you do it please ? – Sami Oct 15 '19 at 19:06
import styles from "./Home.module.scss"; Then use like this. Button . is that help? – Mijan Karim Oct 15 '19 at 19:07
not working . not with {btn} and not with descructing – Sami Oct 15 '19 at 19:10
You can check this . https://codesandbox.io/s/optimistic-hawking-i44zb – Mijan Karim Oct 15 '19 at 19:12
I am importing background image which was define in .scss file as class but it not working – Sami Oct 15 '19 at 19:15
This seems like a huge PITA and very inefficient. We're going backwards in development practices now. React's next greatest thing will be using tables for everything. – Longblog Jun 14 '23 at 23:54

score 1 · Answer 2 · answered Oct 15 '19 at 18:05

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 '19 at 18:05

C. J. Tantay

344
1
7

How to Import sass file to single components in React

2 Answers2