webpack ——css兼容性处理

需要安装 postcss post-loader postcss-preset-env

postcss-preset-env 是用来引进package.json中browserlist配置项， browserlist配置项主要用来设置 css兼容性的具体要求。具体的后面在讲

在webpack配置中

module:{rules:[{

test:/\.css$/, //匹配css文件

excluse:/(node_modules)/, // 不要在node_modules文件下查找

user:['style-loader',css-loader,{

loader:'postcss-loader',

options:{

postcssOptions:{plugin:[require('postcss-preset-env')]} // 将package文件中的css兼容性样式引入进来

}

}]

}]}

在package.json 文件中

browserlist:[

// 开发环境

development:[

"last 1 Chrome version", // 兼容Chrome浏览器最近的一个版本

"last 1 firefox version" , // 兼容firefox 浏览器最近的一个版本

"last 1 safari version" // 兼容 safari 浏览器最近的一个版本

] ,

production:[

'cover 99.5%' , // 兼容全球主流浏览器百分之99.5

"not ie <= 8 " // 不考虑ie8或ie8以下版本

"not op_mini all" // 不考虑所有欧朋浏览器

]

默认情况是生产环境:

如果要设置到开发环境，需要设置node的环境 process.env.NODE_ENV = 'development'.

postcssOption 是用来设置 postcss具体怎么做的。然后我们引入一个 css兼容样式表，告诉postcss应该考虑哪些浏览器的问题。

以上写法是webpack5 。

webpack ——css兼容性处理相关推荐

处理CSS兼容性的几个实用方式。
今天我们来聊一聊「如何处理CSS兼容性所带来的问题.」因为浏览器厂商众多,采用的浏览器内核各不相同,所以对CSS语法支持的程度也各不相同. 有的可能是语法不支持,有的可能是语法支持但是效果表现形态不 ...
div+css兼容性
SS 兼容要点:DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FF: body 设置 text- ...
DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼容
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
webpack css打包为一个css
1.安装 npm install extract-text-webpack-plugin --save-dev 2.项目目录: index文件夹下的index.css: body{background ...
IE浏览器常见CSS兼容性问题及解决办法
IE浏览器常见CSS兼容性问题及解决办法参考文章: (1)IE浏览器常见CSS兼容性问题及解决办法 (2)https://www.cnblogs.com/kiscall/p/4679616.html ...
CSS兼容性问题的解决方式（更新中···）
CSS兼容性问题的解决方式(更新中···) 参考文章: (1)CSS兼容性问题的解决方式(更新中···) (2)https://www.cnblogs.com/zff123/p/9769042.htm ...
CSS兼容性技巧整理－－从IE6-IE9 火狐谷歌浏览器兼容
本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考. CSS兼容常用技巧请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTY ...
CSS兼容性技巧整理从IE6-IE9 火狐谷歌浏览器兼容
CSS样式表对浏览器的兼容性问题有时让人很头疼,不过当我们了解了其中的原理与技巧,就会觉得轻松一些.本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考. CSS兼容常用技巧请 ...
css兼容浏览器火狐,常见IE和火狐的CSS兼容性问题
这里向大家介绍一下IE和火狐的CSS兼容性问题解决方法,在区别火狐和IE时最常用的是!important方法,对于区分其他不同浏览器和浏览器的不同版本的兼容性问题还有下面一些方法,比如:@import ...
博学谷前端 css兼容性简单总结
1. CSS兼容性在网络中浏览器众多,因为不同浏览器使用内核及对W3C标准的支持不一样,各个浏览器对于页面的解释呈视也不尽相同.以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果 ...

webpack ——css兼容性处理

webpack ——css兼容性处理相关推荐

最新文章

热门文章