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

【问题标题】：Webpack v4, ejected create-react-app. How to configure autoprefixer?Webpack v4，弹出 create-react-app。如何配置自动前缀？
【发布时间】：2019-06-08 20:14:46
【问题描述】：

我在泡菜。我使用了一个 create-react-app (v2)，将其弹出，并按照以下方式构建我的项目结构

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

我有多个页面。

我一直在尝试使用 postcss 和 autoprefixer 配置 webpack，但没有什么与我的 webpack.config.dev.js 类似。这是我的 webpack 中包含带有 autoprefixer 的 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 有任何提示吗？

【问题讨论】：

标签： reactjs webpack postcss autoprefixer

【解决方案1】：

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

【讨论】：

我没有 -ms-;-webkit-; -o- 在我的 css 中的任何位置添加前缀：/ 既不在边缘检查的元素上，也不是在 firefox 或 chrome 上。也许是因为我弹出了应用程序，然后我的 css 不在一个 css 文件中，而是在它们影响的页面上导入的多个小文件中（即：page1.js 有一行 import './page1.css'）
你能给我一个你期望前缀的属性的例子吗？这是 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
不影响结果，我尝试构建项目，看看是否有任何改变