Webpack v4, выбросило приложение create-response-app. Как настроить автопрефиксер?

Я в рассоле. Я использовал приложение 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')
    ],
};

У кого-нибудь есть советы о том, как сделать так, чтобы автопрефиксатор работал с этим?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
830
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

CRA использует автопрефиксатор из коробки

Я не получаю -ms -; - webkit-; -o- префиксы в любом месте моего css: / none для проверенных элементов в edge, то есть firefox или chrome. Возможно, это потому, что я выбросил приложение, и тогда мой css находится не в одном файле css, а в нескольких маленьких файлах, импортированных на страницах, на которые они влияют (например: page1.js имеет строку import './page1.css')

ChronicLogic 14.01.2019 21:24

Не могли бы вы привести мне пример свойства, в котором вы ожидаете префикса? Вот список браузеров по умолчанию в конфигурации CRA "browserslist": { "development": [ "last 2 chrome versions", "last 2 firefox versions", "last 2 edge versions" ], "production": [ ">0.25%", "not op_mini all", "ie 11" ] }

Mateusz Krzyżanowski 14.01.2019 21:35

Конечно :) вот мой список браузеров: "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;, но это не так.

ChronicLogic 14.01.2019 21:39

Попробуйте [">0.2%","not dead","ie >= 10", "not op_mini all"]. Здесь вы можете проверить свой конфиг browserl.ist

Mateusz Krzyżanowski 14.01.2019 21:57

не повлияло на результат, попробую собрать проект и посмотрю, изменится ли что-нибудь

ChronicLogic 14.01.2019 22:00

Вы меняли настройки в ключе development или production?

Mateusz Krzyżanowski 14.01.2019 22:01

Ой хорошо! Итак, я изменил его на ваше предложение, затем запустил сценарий npm run build, а затем serve -s build, и, наконец, он сработал! Ты рождественское чудо, Матеуш! Я изменил списки браузеров в файле package.json ^ _ ^ Большое спасибо

ChronicLogic 14.01.2019 22:08

Я рад слышать, что :)

Mateusz Krzyżanowski 14.01.2019 22:09

Другие вопросы по теме