webpack 处理css兼容问题

webpack 处理css兼容性问题需要使用 postcss-loader 和 postcss-preset-evt 来解决。
1、 postcss-loader 处理兼容问题，
2、 postcss-preset-evt  

使用npm安装 postcss-loader 和 postcss-preset-evt

npm i postcss-loader postcss-preset-evt

 

在package.json里添加配置项

"browserslist":{
　　// 开发环境需要在webpack.config.js配置node环境变量
　　//在module.exports 前添加 process.env.NODE_ENV ="development"

"development":[
　　　　"last 1 chrome version",
　　　　"last 1 firefox version",
　　　　"last 1 safari version"
　　],
 　　// 生产环境：默认是看生产环境
    "production":[
　　　　">0.2%",
　　　　"not dead",
　　　　"not op_mini all"
　　]
}

开发环境需要在webpack.config.js 添加node环境变量

process.env.NODE_ENV = "development"

　module.exports = {...}

module:{
        // css 兼容行处理， postcss-loader 
        // css环境兼容运行浏览器处理环境  postcss-preset-evt\
        // postcss 找到 package.json 中的browserslist里面的配置，通过配置加载指定的css兼容性样式
        rules:[
            {
            test:/\.css/,
            use:[

                MiniCssExtractPlugin.loader,
                'css-loader',
                //使用postcss-loader的默认配置
                //修改 loader 的配置 
                {
                    loader:'postcss-loader',
                    options:{
                        ident:'postcss',
                        plugins:()=>{
                            require('postcss-loader-env')()
                        }
                    }
                }
            ]               
            },
        ]
    },

 

标签：兼容问题,evt,loader,webpack,preset,postcss,css
来源： https://www.cnblogs.com/mrli0769/p/15903470.html