webpack 自动前缀器有问题，没有将 -webkit- 添加到动画 css 中

Question

>我有一个问题。我无法将一些前缀"-webkit"添加到动画 css 和其他。但是要灵活地添加-'ms'。也许问题出在浏览器列表中，

const autoprefixerOptions = {
    browsers:["Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", "Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6"],
    grid: true
};
{
                test: /.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {loader: 'css-loader', options: {importLoaders: 2}},
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')(autoprefixerOptions),
                                require('cssnano')()
                            ]
                        }
                    },
                    {loader: "sass-loader", options: {}}
                ]
            },

Answer 1

我建议订购代码，它会更具可读性。对我来说，这个解决方案会生成一个webkit前缀。

{
  loader: 'postcss-loader',
  options: {
  sourceMap: true,
  config: {
    path: './config/',
  },
 },
},

在"config"文件夹中，我有文件postcss.config.js和webpack.config.js

module.exports = {
  plugins: {
     'autoprefixer': {  },
     'postcss-url': {
       url: 'inline',
       maxSize: 50
     },
     'cssnano': {
       safe: true
     }
  }
};

自动前缀的整个配置都在 package.json 文件中

"browserslist": [
  "last 2 version",
  "> 1%",
  "maintained node versions",
  "not dead"
],

看看我的项目，看看它是如何解决的 - github。