React 中使用scss

React 中使用scss

1. 首先导入node-sass npm i node-sass -D

2. 编写样式文件header.scss， header.module.scss 两个样式文件一样，只是文件名不同

   .header-box {
       display: flex;
       div {
           font-size: 60px;
       }
   }
   

3. 导入样式文件import './styles/header.scss'

   import React from 'react'
   import from './styles/header.module.scss'
   export default class HeaderDom extends React.Component {
       constructor() {
           super()
       }
       render() {
           return (
               <div className='header-box'>
                   <div>Hello World</div>
               </div>
           )
       }
   }
   

4. 结果
   

5. React 中使用scss加上scoped 导入样式文件import headerStyle from './styles/header.module.scss'

   import React from 'react'
   import headerStyle from './styles/header.module.scss'
   export default class HeaderDom extends React.Component {
       constructor() {
           super()
           console.log(headerStyle)
       }
       render() {
           return (
               <div className={ headerStyle['header-box']}>
                   <div>Hello World</div>
               </div>
           )
       }
   }
   

6. 结果 在普通的样式上面添加了唯一值