1.7 支持 sass 预处理与 classnames 模块的使用

一、支持SASS预处理

1. 安装：npm install sass

2. 新建scss文件编写css样式

3. 页面引入即可

二、classnames模块的使用

1. 如果有多个样式，为了样式灵活，可以在上面预定义数组，然后通过join进行拼接，保证样式的灵活性

   function App() {
   
     // 定义样式数组
     const myClass = ['box1', 'box2']
   
     return (
       <>
         {/* 使用数组.join(' ')拼接成以空格间隔的字符串 */}
         <div className={myClass.join(' ')}>1234567890</div>
       </>
     )
   }
   
   export default App
   

2. 上述的数组方案还是不够灵活，最灵活的方案还是对象的使用：

3. 安装classnames：npm install classnames

4. 引入classNames：importclassNames from 'classnames'

   import classNames from 'classnames'
   
   function App() {
     // const myClass = ['box1', 'box2']
   
     const myClass = classNames({
       box1: true, // 表示可用
       box2: false, // 表示不可用
     })
   
     return (
       <>
         {/* <div className={myClass.join(' ')}>1234567890</div> */}
         <div className={myClass}>0987654321</div>
       </>
     )
   }
   
   export default App
   

5. 不但可以控制全局样式，也可以控制局部样式

   import classNames from 'classnames'
   import style from './05.module.css'
   
   function App() {
     // const myClass = ['box1', 'box2']
   
     const myClass = classNames({
       box1: true,
       box2: false,
       [style.headTitle]: true, // 引入局部样式
     })
   
     return (
       <>
         {/* <div className={myClass.join(' ')}>1234567890</div> */}
         <div className={myClass}>0987654321</div>
       </>
     )
   }
   
   export default App
   

三、其他方案

1. CSS-in-JS方案：组件的css直接在页面文件中编写，不抽离

2. Tailwind CSS方案：无需个人编写，使用他的自定义方案