React中如何使用scss

這篇文章主要介紹“React中如何使用scss”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“React中如何使用scss”文章能幫助大家解決問題。

React中使用scss

首先導入node-sass npm i node-sass -D

編寫樣式文件header.scss， header.module.scss 兩個樣式文件一樣，只是文件名不同

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

導入樣式文件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>
        )
    }
}

結果

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>
        )
    }
}

結果 在普通的樣式上面添加了唯一值

React中寫scss樣式

寫樣式 

最外層寫.root類名

里面有:global包裹 

再寫具體的類型 寫具體的樣式 

.root {
  height: 100%;
 
  :global {
    .content {
      position: relative;
      z-index: 1;
      height: 100%;
    }
}

使用樣式 

先引入樣式文件import styles from './index.module.scss'

最外層的div里面寫className="styles.root"

后面的類名寫具體的類名就行

例子：

關于“React中如何使用scss”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。