zoukankan      html  css  js  c++  java
  • 前端打包 -webkit-box-orient 丢失问题

    问题:前端打包之后,文本多行显示省略号的关键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: cssshare.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。

  • 相关阅读:
    C#:反射
    静态和非静态类
    数据的存入取出(注册机方式)
    退出unity运行
    网络流基础
    欧拉回路
    博弈论问题
    洛谷P5304 [GXOI/GZOI2019] 旅行者
    [ZJOI2006]物流运输
    POJ3278 Catch that cow
  • 原文地址:https://www.cnblogs.com/wangyingblock/p/13219723.html
Copyright © 2011-2022 走看看