Published on
373

father 支持 css autoprefixer 配置

Authors
  • avatar
    Name
    小辉辉
    Twitter

现象

在使用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属性样式生成,问题解决。