react中 modules.scss的基本使用

1.下载引入包

npm i scss -D

 2.修改样式文件名

将css文件名改成后缀为  .module.scss （React脚手架中的约定，与普通 CSS 作区分）

3.组件中进行使用

导入  import styles from './index.module.scss'
 
 <div className={styles.css类名}></div>

  4.最佳用法

每个组件的根节点使用 CSSModules 形式的类名（ 根元素的类名： root ）
其他所有的子节点，都使用普通的 CSS 类名 :global

 index.module.scss

 .root {
   display: 'block';
   position: 'absolute';
   // 此处，使用 global 包裹其他子节点的类名。此时，这些类名就不会被处理，在 JSX 中使用时，就可以用字符串形式的类名
   // 如果不加 :global ，所有类名就必须添加 styles.title 才可以
   :global {
     .title {
       .text {
       }
       span {
       }
     }
     .login-form { ... }
   }
 }

组件：

 import styles from './index.module.scss'
 const 组件 = () => {
   return (
     {/* （1） 根节点使用 CSSModules 形式的类名（ 根元素的类名： `root` ）*/}
     <div className={styles.root}>
       {/* （2） 所有子节点，都使用普通的 CSS 类名*/}
       <h1 className="title">
         <span className="text">登录</span>  
         <span>登录</span>  
       </h1>
       <form className="login-form"></form>
     </div>
   )
 }