注意:此功能适用于
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。