阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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。

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录