У меня есть развернутый проект, созданный с помощью пакета Parcel.js.
После применения CSS Autoprefixer и повторного развертывания веб-сайта почти все стили моего веб-сайта были нарушены. Я действительно не уверен, что вызвало это, и, к сожалению, я не смог найти ни одного подобного вопроса для проблемы, с которой я столкнулся.
Я впервые добавил Autoprefixer в мои dev-зависимости:
"devDependencies": {
"autoprefixer": "^9.5.1",
"parcel-bundler": "^1.12.3",
"postcss-modules": "^1.4.1"
},
Затем я создал конфигурационный файл .postcssrc в моей корневой папке, содержащий:
(Я использовал немного CSS-Grid для макетов на сайте, следовательно, следующие конфигурации)
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": "autoplace"
}
}
}
Я также создал файл конфигурации .browserslistrc для целей браузера также в корневой папке, содержащей:
defaults
Я выбрал конфигурацию по умолчанию для целей браузера, потому что в документации Autoprefixer было упомянуто, что опция по умолчанию содержит большое разнообразие браузеров, и из-за того, что у меня не было особых потребностей, это казалось лучшим вариантом.
Я изо всех сил старался дать точное описание событий, если вам нужна дополнительная информация, пожалуйста, дайте мне знать.
ОБНОВЛЕНИЕ: Я думал, что проблема заключается в "autoprefixer": {
"grid": "autoplace", как упомянуто в документации по автофиксатору, что использование этой опции может вызвать проблемы на уже развернутых / установленных веб-сайтах, у которых не было автофиксатора.
Поэтому я откатил свои изменения до состояния предварительного авторефиксатора, не пройдя все этапы снова, но на этот раз я не включил опцию grid: autoplace и снова выбрал grid: true по умолчанию, НО у меня та же проблема.
Я думаю, это может быть связано с Parcel или с тем, как я использую postcss в Parcel. Если кто-нибудь знает что-нибудь об этом, помощь будет оценена.