添加 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

------ -
  ----------------- ----
-

another-stylesheet.css

------ -
  ------ ----
-

Button.js

------ ------ - --------- - ---- --------
------ ------ ---- ---------------------- -- - --- ------- ----- ------
------ --------------------------- -- ---- --- --

----- ------ ------- --------- -
  -------- -
    -- -- -- ----
    ------ ---------- --------------------------------- ----------------------
  -
-

结果

不会和其他 .error 类名冲突

------- ---- ------ --- --- ---------- --- --- --- ---- ------
---------- ------------------------------------------

还有一个可选功能。 完全支持常规 <link> 样式表和CSS文件。对于以 .module.css 扩展名结尾的文件,将切换到 CSS Modules。


上一篇:添加一个样式表
下一篇:添加 Sass