最近在做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. CSS——盒子模型

    一.盒子模型: 模型如下: 如图:盒子模型包括:margin.padding.border.content四部分. margin:外边距,透明,能够显示父级的背景颜色等.表示元素与元素之间的间隔或者说 ...

  2. #pragma execution_character_set("utf-8")

    VC2010增加了“#pragma execution_character_set("utf-8")”,指示char的执行字符集是UTF-8编码. VS2010 设置 字符编码: ...

  3. Solr根据参考点的坐标来返回范围内的小区和距离

    @Test public void query() throws Exception{ SystemDefaultHttpClient httpClient = new SystemDefaultHt ...

  4. Android Studio 搭配 Tortoise SVN 安装问题汇总

    (1)Android studio 中想要使用SVN,但是在安装 1.9版本的SVN,会报SVN is too old(实际是太新了)的错误.所以只能下载1.8以下版本 (2)安装svn时,需要手动选 ...

  5. UAC（User Agent Client） 和 UAS（User Agent Server）

    SIP协议采用Client/Server模型.每一个请求(Request)触发服务器的一个操作:每个操作被称为方法(Method):每个请求除了指明具体方法外,还携带了一系列的头域(Header fi ...

  6. 《Android应用性能优化》 第4章 高效使用内存

      本地类型 大小 字节 boolean jboolean 8位(取决于VM) 1 byte jbyte 8位 1 char jchar 16位 2 short jshort 16位 2 int ji ...

  7. 数据库开源框架ormlite

    今天听说了ORM框架ORMLITE,特地去了解了一下. 该框架可以使用注解方式来生成数据库表,还封装了常用的数据库操作. 类似J2EE的HIBERNATE框架对数据库的处理. 省去了书写建表语句的麻烦 ...

  8. Android中pull解析XML文件的简单使用

    首先,android中解析XML文件有三种方式,dom,sax,pull 这里先讲pull,稍候会说SAX和DOM pull是一种事件驱动的xml解析方式,不需要解析整个文档,返回的值是数值型,是推荐 ...

  9. Ros学习——录制与回放

    mkdir ~/bagfiles cd ~/bagfiles rosbag record -a 录制完成后,查看文件: rosbag info <your bagfile> 回放:在终端中 ...

  10. 阿里云、宝塔、wordpress建站

    1 阿里云 购买一个学生机就行啦 2 宝塔 2.1 更改阿里云的镜像 技巧01:先关掉阿里云之前的镜像 技巧02:到镜像市场中寻找宝塔的镜像资源 2.2 配置安全组 宝塔的控制面板需要开通端口 888 ...