Steps to use sass in React

Install and use sass in react

npm install node-sass sass-loader --save

2. How to use

Method 1: Define the UserInfo.scss file

.UserInfo{
    
     color: red; }

Jsx imports scss files

import  './UserInfo.scss'

export default class Login extends React.Component {
    
    
	render () {
    
    
		return (
            <div className='UserInfo'>
                demo
            </div>
		);
	}
}

Method 2: Use the css module to define the loginPage.module.scss file

This method adds a module when creating a new scss file. This method automatically compiles each class name in the scss file into a unique ID, which can effectively improve the performance of the project.

.loginPage{
    
    
    color:blue;
}

jsx uses the module.scss file

import styleObj from './loginPage.module.scss'
export default class Login extends React.Component {
    
    
	render () {
    
    
		return (
            <div className={
    
    styleObj.loginPage}>
                demo
            </div>
		);
	}
}