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

时间:2019-01-14 19:58:51

标签: reactjs webpack postcss autoprefixer

我在泡菜中。 我使用了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')
    ],
};

有人对如何继续使用自动前缀程序有任何提示吗?

1 个答案:

答案 0 :(得分:0)

CRA开箱即用使用自动前缀