React中sass的使用步骤_react 安装sass

react中安装使用sass

npm install node-sass sass-loader --save
1

二、使用方法

方法1：定义UserInfo.scss文件

.UserInfo{ color: red; }
1

jsx引入scss文件

import  './UserInfo.scss'

export default class Login extends React.Component {
	render () {
		return (
            <div className='UserInfo'>
                demo
            </div>
		);
	}
}
1
2
3
4
5
6
7
8
9
10
11

方法2：使用css module定义loginPage.module.scss文件

该方法在新建scss文件时，加上module，这种方法，将scss文件中的每个类名自动编译为一个唯一的ID，能有效的提升工程的性能

.loginPage{
    color:blue;
}
1
2
3

jsx使用 module.scss文件

import styleObj from './loginPage.module.scss'
export default class Login extends React.Component {
	render () {
		return (
            <div className={styleObj.loginPage}>
                demo
            </div>
		);
	}
}
1
2
3
4
5
6
7
8
9
10