【React】两种样式文件引用约定->解决样式不生效问题

 

文件目录结构图（不同的命名方式）：

两个scss的内容：

.test {
  background-color: #5e83fb !important;
}

引用文件的两种方式：

方式1：import styles from './index.module.scss';
方式2：import './index.scss';

方式1的使用方式(react编译器会将文件编译成作用于当前module的对象)：

<div className={styles.test}>

方式2的用用方式：

<div className='test'>

 

小知识：样式表添加 !important 实现强引用优先级。

eg：font-size: 12px !important;