我正在基于CRA 3.4.1和组件库PrimeReact 4.1.2制作一个Web应用程序。
我自己的 CSS 由于CRA的PostCSS设置而得到处理，例如源中的每个display: flex都会获得在构建文件（-ms-flexbox）中添加的前缀main.<hash>.chunk.css版本，从而启用IE10支持。
问题是 PrimeReact 组件捆绑了自己的 CSS ，并且在构建应用程序时未处理此 CSS 。结果，内置的2.<hash>.chunk.css没有供应商前缀的规则。
如何启用此类第三方CSS的处理？最好不弹出。可以配置吗？在官方文档中我什么都没看到。
也许有一种方法可以排除第三方 CSS ，然后我只是import '../node_modules/primereact/resources/primereact.css'将其作为我自己的CSS处理？
答案 0 :(得分：1)
这是primereact软件包的特定问题，它的发生是因为package.json内有browserslist的{{1}}规则：
"not ie <= 11"您将必须在"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
中对文件进行硬编码，并将node_modules/primereact/package.json更改为"not ie <= 11"。 PostCSS Normalize不会为 IE11 添加浏览器前缀，因此您必须将"ie 10-11"的值设置为browserslist。
更改之后，您将拥有所有ie 10-11条规则来生成primereact/resources/primereact.css前缀。
我不确定这是否是真正的primereact问题；如果他们不支持 IE11 ，那么这不是问题，因为他们的-ms-flex严格遵守不支持 IE11 的规则。
您可以使用patch-package创建补丁，并在每次进行package.json / npm修改后应用此修订/更改（请注意，因为它确实排除了yarn默认情况下）。
因此，如果您在项目package.json中设置"browserslist"，但CRA确实会检查每个模块，那么react-scripts和PostCSS Normalize确实会为浏览器添加前缀。 {1}}，并覆盖默认项目设置。如果再次遇到此类问题，请首先检查相关模块package.json文件的内容，特别是package.json选项的内容。