How to Import sass file to single components in React

user_12216793 0
Viewed 3928

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

reactjs ecmascript-6 saas javascript
2 Answers

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 .

user_24870360

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'

user_81676330
Related