最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性，本地跑项目没问题，但是打包放到服务器后发现这个属性丢失了。如下图：

后来在网上查了一下，发现可能是optimize-css-assets-webpack-plugin这个插件的问题，导致打包时这个属性和注释混在了一起（个人猜测）,其实解决办法很简单，只需要在这个属性前后加一个特殊注释即可，如下图：

也就是说在使用“-webkit-box-orient: vertical;”需要这样使用

/* ! autoprefixer: off */

-webkit-box-orient: vertical;

/* autoprefixer: on */

　　

vue项目中打包编译后，CSS样式【-webkit-box-orient: vertical】打包后丢失问题的更多相关文章

  1. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  2. <转载> VUE项目中CSS管理

    vue的scoped 在vue项目中,当 .vue文件中 <style> 标签有 *scoped 属性时,它的 CSS 只作用于当前组件中的元素,很好的实现了样式私有化的目的. 使用sco ...

  3. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  4. VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题

    VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...

  5. 转：如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  6. 在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  7. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  8. 如何在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...

  9. 如何在VUE项目中使用SCSS

    首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...

  10. 如何在Vue项目中，通过点击DOM自动定位VScode中的代码行？

    作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...

随机推荐

  1. C#如何拿到从http上返回JSON数据?

    第一章:C#如何拿到从http上返回JSON数据? 第二章:C#如何解析JSON数据?(反序列化对象) 第三章:C#如何生成JSON字符串?(序列化对象) 第四章:C#如何生成JSON字符串提交给接口 ...

  2. Ajax入门（一）从0开始到一次成功的GET请求

    什么是服务器 网页浏览过程分析 一个完整的HTTP请求过程,通常有下面7个步骤 建立TCP连接 Web浏览器向Web服务器发送请求命令 Web浏览器发送请求头信息 Web服务器- 应答 Web服务器- ...

  3. Replace Pioneer注册方法

    Replace Pioneer注册方法 Replace Pioneer过期后,会弹出一个注册(Registration)窗口,其中有一个试用选项(Trial License),点击Trial Lice ...

  4. day17-jdbc 8.ResultSet介绍

    但是这些东西在mysql那里有问题.mysql的驱动不是很完善.getClob().getBlob()不好使不是因为程序的问题,而是因为mysql驱动的问题,oracle驱动就没有这个问题,证明ora ...

  5. IFC4 在线参考手册

    国内地址1:http://www.vfkjsd.cn/ifc/ifc4/index.htm 国内地址2:http://www.bim-times.com/ifc/ifc4/index.htm 官方地址 ...

  6. [转]CSS块级元素和行内元素

    原地址:http://www.studyofnet.com/news/398.html 本文导读:HTML中的元素可分为两种类型:块级元素和行级元素.这些元素的类型是通过文档类型定义(DTD)来指明. ...

  7. Luogu 3168 [CQOI2015]任务查询系统

    区间修改单点查询,又观察到是一个k小,考虑主席树上做差分 一开始样例疯狂挂,后来发现主席树在一个历史版本上只能修改一次,所以要开2*n个根结点,记录一下每个时间对应的根结点编号 然后80分,考虑到当一 ...

  8. SQL Server相关知识和经验的碎片化记录

    1.在向服务器发送请求时发生传输级错误 在向服务器发送请求时发生传输级错误. (provider: TCP 提供程序, error: 0 - 远程主机强迫关闭了一个现有的连接.) ---> Sy ...

  9. AR# 30522:LogiCORE RapidIO - How do system_reset and link_reset work?

    Description How do system_reset and link_rest work? Solution lnk_linkreset_n (input): In Xilinx SRIO ...

  10. shape不同版本这间的兼容

    在做那个只有左边上面是圆角和只有右边下边是圆角的时候,出现了一个问题,那就是在android3.0以前,android:bottomLeftRadius与android:bottomRightRadi ...