Autoprefixer 不添加供应商前缀

Question

我认为我的 webpack 配置或 postcss 插件配置有问题。我的测试文件 'dist/main.css' 创建良好，但未添加供应商前缀。我尝试使用 css 属性中列出的 npx autoprefixer --info ，但它仍然没有为我的 css 样式添加供应商前缀。下面是我的 webpack 文件。

// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isDevelopment = process.env.NODE_ENV === 'development'


module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        chunkFilename: '[id].js',
        publicPath: ''
    },
    resolve: {
        extensions: ['.js', '.jsx', '.scss', '.sass']
    },
    module: {
        rules: [
            {
                test: /\.(js||jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /(\.css|scss)$/,
                exclude: /node_modules/,
                use: [
                    isDevelopment ?
                        { loader: 'style-loader' }
                        :
                        MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: '[name]__[local]__[hash:base64:5]'
                            },
                            sourceMap: isDevelopment
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                config: true
                            },
                            sourceMap: isDevelopment
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: isDevelopment
                        }
                    },
                ]
            },
            {
                test: /\.(png||jpe?g||gif)$/,
                loader: 'url-loader?limit=10000&name=img/[name].[ext]'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/public/index.html',
            filename: 'index.html',
            inject: 'body'
        }),
        new webpack.DefinePlugin({
            "process.env": JSON.stringify(dotenv.parsed)
        }),
        new MiniCssExtractPlugin()
    ],
    devServer: {
        compress: true,
        port: 5050
    }
}

这就是我为 postcss 插件

添加 autoprefixer 的方式

// postcss.config.js
module.exports = {
    plugins: () => {
        return [
            require('autoprefixer')({
                grid: true
            })
        ]
    }
}

这是我的浏览器列表

// package.json

...
"browserslist": [
        "> 1%",
        "last 5 versions"
    ]

提前致谢！

Answer 1

我之前也运行遇到过同样的问题。我不确定到底是什么问题，但是当我切换到使用此处提到的 postcss-preset-env 时 https://github.com/webpack-contrib/postcss-loader#autoprefixer （它说 autoprefixer 已添加到预设中，我们不需要单独添加），对我来说效果很好

安装后，您只需按如下方式切换postcss.config.js：

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssPresetEnv(),
  ],
}

Autoprefixer 不添加供应商前缀

Autoprefixer doesn't add vendor prefix

webpack-4

autoprefixer