标签：兼容问题 evt loader webpack preset postcss 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。