问题:前端打包之后,文本多行显示省略号的关键css语句 -webkit-box-orient: vertical;属性丢失,导致样式不生效。

解决方案:

1、添加注释

在网上找了一种方案,把autoprefixer关掉

.bk-table .cell {
        /* autoprefixer: off */
        -webkit-box-orient: vertical!important;
        -moz-box-orient: vertical;
        /* autoprefixer: on */
}

这样确实解决了编译丢失的情况,但会在编译过程中报warning:

‘(Emitted value instead of an instance of Error) 
autoprefixer: \css\share.css:199:3: Second Autoprefixer control comment was ignored.
 Autoprefixer applies control comment to whole block, not to next rules.’

2、解决warning

打开webpack.prod.conf.js文件进行配置autoprefixer: {remove: false} (已验证,推荐)

new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true,
        autoprefixer: {remove: false}
      }
})

另一种方案也可解决warning(待验证):

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

可以解决warning。

相关文章:

  • 2022-12-23
  • 2021-08-07
  • 2018-09-28
  • 2022-12-23
  • 2021-07-26
  • 2021-12-31
  • 2021-11-29
  • 2021-10-31
猜你喜欢
  • 2022-12-23
  • 2021-08-21
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案