- Published on
- 约 373 字
father 支持 css autoprefixer 配置
- Authors
- Name
- 小辉辉
现象
在使用father打包工具时,如果要生成umd的格式,只需要修改.fatherrc.ts文件,在里面加入一个umd属性的对象,对象内容配置entry和output即可,相比于繁琐的webpack配置可谓要简单了不知道多少。
但是有一次,测试反馈有个功能在他浏览器上面样式显示有问题,但是我本地又是好的,这时就想到了肯定是浏览器样式兼容性问题了,仔细看了下果然是有个backgroud-clip
属性值为text
时存在浏览器版本兼容问题,谷歌需要120的版本才支持该功能,在120版本之前可以通过追加浏览器前缀标识即-webkit-background-clip
来解决。
解决
那现在问题是如果在打包的时候自动追加这个前缀,了解到wepback上的处理方案,通过postcss插件关联autoprefixer模块来解决,就想着去看看father上有没有同样的配置,因为father的umd背后的实现就是webpack,最后在文档里找到了postcssOptions和autoprefixer配置,最后对配置做了如下修改:
{
// 可以集成postcssOptions配置中的插件选项
postcssOptions: {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['> 1%', 'last 2 versions', 'not ie <= 8']
})
]
},
// 也可以单独配置autoprefixer
autoprefixer: {
overrideBrowserslist: ['> 1%', 'last 2 versions', 'not ie <= 8']
}
}
最后重新打包,发现-webkit-background-clip
属性样式生成,问题解决。