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。

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

抖音号

抖音号: axihe

Anbang