create-react-app 添加 CSS Modules 样式表

添加 CSS Modules 样式表

注意：此功能适用于 react-scripts@2.0.0 及更高版本。

该项目使用 [name].module.css 文件命名约定支持 CSS Modules 和常规 CSS 。

CSS Modules 允许通过自动创建 [filename]\_[classname]\_\_[hash] 格式的唯一 classname 来确定 CSS 的作用域。

提示： 如果要使用 Sass 预处理 CSS，请确保 按照安装说明进行操作 ，然后将 CSS 文件扩展名更改为：[name].module.scss 或 [name].module.sass 。

CSS Modules 允许你在不同的文件中使用相同的 CSS classname，而无需担心命名冲突。 在此处 了解有关 CSS Modules 的更多信息。

Button.module.css

.error {
  background-color: red;
}

another-stylesheet.css

.error {
  color: red;
}

Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // 将 css modules 文件导入为 styles
import './another-stylesheet.css'; // 导入常规 CSS 文件

class Button extends Component {
  render() {
    // 作为 js 对象引用
    return <button className={styles.error}>Error Button</button>;
  }
}

结果

不会和其他 .error 类名冲突

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz"></div>

还有一个可选功能。 完全支持常规 <link> 样式表和 CSS 文件。

对于以 .module.css 扩展名结尾的文件，将切换到 CSS Modules。