Webpack v4，弹出 create-react-app。如何配置自动前缀？

Question

我很为难。我使用了 create-react-app (v2)，将其弹出，并按照

构建我的项目结构

projectDir > src > pages > page > page.js || page.css

而且我有多个页面。

我一直在尝试使用 postcss 和 autoprefixer 配置 webpack，但是没有什么与我的 webpack.config.dev.js 有任何相似之处。这是我的 webpack 的一部分，其中包含带有自动前缀的 postcss：

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')
    ],
};

任何人有任何关于如何继续使 autoprefixer 使用它的提示吗？

Answer 1

CRA 使用开箱即用的自动前缀

Webpack v4，弹出 create-react-app。如何配置自动前缀？

Webpack v4, ejected create-react-app. How to configure autoprefixer?

reactjs

webpack

postcss

autoprefixer