Я в рассоле. Я использовал приложение create-response-app (v2), извлек его и построил структуру своего проекта в соответствии с
projectDir > src > pages > page > page.js || page.css
и у меня несколько страниц.
Я пытался настроить webpack с postcss и autoprefixer, но нет ничего отдаленно напоминающего то, что у меня есть для моего webpack.config.dev.js. Вот часть моего веб-пакета, в которой есть postcss с autoprefixer:
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
},
},
];
if (preProcessor) {
loaders.push(require.resolve(preProcessor));
}
return loaders;
};
Это базовая после того, как я извлекаю приложение. Кроме того, я добавил postcss.config.js в свой корневой каталог, но я не знаю, куда его импортировать.
module.exports = {
plugins: [
require('autoprefixer')
],
};
У кого-нибудь есть советы о том, как сделать так, чтобы автопрефиксатор работал с этим?





CRA использует автопрефиксатор из коробки
Не могли бы вы привести мне пример свойства, в котором вы ожидаете префикса? Вот список браузеров по умолчанию в конфигурации CRA "browserslist": { "development": [ "last 2 chrome versions", "last 2 firefox versions", "last 2 edge versions" ], "production": [ ">0.25%", "not op_mini all", "ie 11" ] }
Конечно :) вот мой список браузеров: "browserslist": [ ">0.2%", "not dead", "not ie < 10", "not op_mini all" ] Я должен сделать сайт совместимым с I.E. 10 и выше. Я использую display: flex довольно часто, и я знаю, что автопрефиксатор превратится в display: -webkit-box; display: -ms-flexbox; display: flex;, но это не так.
Попробуйте [">0.2%","not dead","ie >= 10", "not op_mini all"]. Здесь вы можете проверить свой конфиг browserl.ist
не повлияло на результат, попробую собрать проект и посмотрю, изменится ли что-нибудь
Вы меняли настройки в ключе development или production?
Ой хорошо! Итак, я изменил его на ваше предложение, затем запустил сценарий npm run build, а затем serve -s build, и, наконец, он сработал! Ты рождественское чудо, Матеуш! Я изменил списки браузеров в файле package.json ^ _ ^ Большое спасибо
Я рад слышать, что :)
Я не получаю -ms -; - webkit-; -o- префиксы в любом месте моего css: / none для проверенных элементов в edge, то есть firefox или chrome. Возможно, это потому, что я выбросил приложение, и тогда мой css находится не в одном файле css, а в нескольких маленьких файлах, импортированных на страницах, на которые они влияют (например:
page1.jsимеет строкуimport './page1.css')