如何在 Create React App 应用程序中处理第 3 方依赖项的 CSS

Question

我正在基于 CRA 3.4.1 使用组件库 PrimeReact 4.1.2 制作 Web 应用程序。

由于 CRA 的 PostCSS 设置，我自己的 CSS 得到了处理，例如源代码中的每个 display: flex 都会在构建文件 (main.<hash>.chunk.css) 中添加带前缀的 -ms-flexbox 版本，从而启用 IE10 支持。

问题是 PrimeReact 组件有自己的 CSS 捆绑，而这个 CSS 在构建我的应用程序时未得到处理。因此，构建的 2.<hash>.chunk.css 没有供应商前缀规则。

如何启用此类第 3 方的处理 CSS？最好不要弹出。可以配置吗？我在官方文档中没有看到任何相关信息。
也许有办法排除第 3 方 CSS，然后我 import '../node_modules/primereact/resources/primereact.css' 将其作为我自己的 CSS 处理？

Answer 1

这是 primereact package and it happens because inside package.json 的特定问题 "not ie <= 11" 有一个 browserslist 规则：

"browserslist": [
  ">0.2%",
  "not dead",
  "not ie <= 11",
  "not op_mini all"
]

您必须在 node_modules/primereact/package.json 中硬编码文件并将 "not ie <= 11" 更改为 "ie 10-11"。 PostCSS Normalize 不会为 IE11 添加浏览器前缀，因此您必须将 browserslist 值设置为 ie 10-11。

更改之后，您将拥有所有 primereact/resources/primereact.css 规则来生成 -ms-flex 个前缀。

我不确定这是否是一个真正的 primereact 问题；如果他们不支持或不能支持 IE11，那么这不是问题，因为他们的 package.json 严格遵守不支持 IE11[= 的规则54=].

您可以使用 patch-package 创建补丁并在每次 npm/yarn 修改后应用 fix/change（ 小心默认排除 package.json).

所以，通常 CRA 和 react-scripts 如果你在你的项目中设置 "browserslist" 会添加浏览器的前缀package.json 但 PostCSS Normalize 会检查每个模块 package.json 并覆盖默认项目设置。如果您再次遇到此类问题，请先检查相关模块 package.json 文件的内容，特别是 "browserslist" 选项。

如何在 Create React App 应用程序中处理第 3 方依赖项的 CSS

How to process 3rd party dependency's CSS in a Create React App application

css

reactjs

react-scripts

create-react-app