javascript - 如何通过 CRA 使用不同的 CSS 重置样式表？

Question

create-react-app中有一个关于adding a css reset的部分.

据我了解，CRA 包含 PostCSS Normalize 作为依赖项，您所需要做的就是创建一个 css 文件并向其添加 @import-normalize; ，您将拥有 normalize.css。 (顺便说一下，我的编辑器用这个 @import-normalize 给了我“Unknown CSS at-rule”)。

我想要的是重置，其中包括将 body 上的边距设置为零。我什至无法仅通过查看我的应用程序来判断是否正在应用重置。我只是想确保:此设置实际上并未包含在按照说明包含的 normalize.css 中？

另外，我在哪里可以找到 @import-normalize 含义的解释？我以前没见过这个语法。

最后，有没有办法通过 CRA 使用不同的重置文件，或者我应该安装另一个文件并像通常那样导入它？

Answer 1

这里是关于 normalize.css 的一些背景知识 http://nicolasgallagher.com/about-normalize-css/

使用 CRA，您可以使用任何您喜欢的方法规范/重置 CSS。您只需要创建一个包含重置/规范化CSS规则的样式表并将其导入到App中。即import './myCustomReset.css

或者您也可以将重置的CSS文件添加到公共(public)文件夹中，并将其作为链接标记添加到您的index.html中。即<link rel="stylesheet" href="./customResetStyles.css">

我倾向于使用https://gist.github.com/DavidWells/18e73022e723037a50d6每当我需要重置样式而不仅仅是标准化时。