自动前缀不添加供应商前缀

如何解决自动前缀不添加供应商前缀

我认为我的webpack配置或postcss插件配置有问题。我的测试文件'dist / main.css'已经很好地创建，但是未添加任何供应商前缀。我尝试使用npx autoprefixer --info中列出的css属性，但是它仍然没有为我的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
                            },{
                        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"
    ]

提前谢谢！

解决方法

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

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

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

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