Как обработать сторонние зависимости CSS в приложении Create React App

Question

Я делаю веб-приложение на основе CRA 3.4.1 с библиотекой компонентов PrimeReact 4.1.2.

Моя собственная CSS обрабатывается благодаря настройке CRA Post CSS Например, каждый 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?

Answer 1

Это специфическая c проблема пакета primereact , и это происходит потому, что внутри package.json есть правило browserslist для "not ie <= 11":

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

Вам придется жестко закодировать файл внутри node_modules/primereact/package.json и изменить "not ie <= 11" на "ie 10-11". Post CSS Normalize не добавляет префиксы borwser для IE11 , поэтому вам придется установить значение browserslist ie 10-11.

После этого изменения у вас будут все primereact/resources/primereact.css правила для генерации -ms-flex префиксов.

Я не уверен, является ли это реальной primereact проблемой; если они этого не делают или не могут поддерживать IE11 , то это не проблема, поскольку их package.json строго по этому правилу не поддерживает IE11 .

Вы можете использовать patch-package для создания патча и применять это исправление / изменение после каждой npm / yarn модификации ( будьте осторожны, поскольку она исключает package.json по умолчанию ).

Итак, обычно CRA и реакции-скрипты добавляют префиксы для браузера, если вы настроили "browserslist" внутри своего проекта package.json, но Post CSS Normalize проверяет каждый модуль package.json и переопределяет настройки проекта по умолчанию. Если вы снова столкнулись с такими проблемами, вы сначала go и проверьте содержимое соответствующего файла модуля package.json и, в частности, для опции "browserslist".