前言

-webkit-box-orient: vertical在本地开发环境运行都没问题,一旦打包以后就会丢失

正文

原因:

-webkit-box-orient: vertical  这个属性被 optimize-css-assets-webpack-plugin插件在编译时删除掉了

方法1. 解决办法(亲测无效,但是网上有说这种解决办法能处理):

将webpack.prod.conf.js文件中关于optimize-css-assets-webpack-plugin的配置项由

new OptimizeCSSPlugin({
cssProcessorOptions: config.build.cssSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),

改为

new OptimizeCSSPlugin({
cssProcessorOptions: config.build.cssSourceMap
? { safe: true, map: { inline: false } }
: { safe: true,
autoprefixer: {
remove: false
}
}
}),

这样再打包就不会被删除了

方法2. 解决办法(亲测有效)

在package.json文件中进行如下修改:

"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8",
"iOS >= 6",
"Android > 4.1",
"Firefox > 20"
]

这样postcss在处理的时候就会自动加上兼容对应浏览器版本的一些属性。

方法3. 解决办法

autoprefixer不仅会帮你加-webkit-之类的prefixer, 
它还会帮你删除你自己写在 css/sass/less里的样式, 
真是厉害了

关闭autoprefixer的自动删除功能,这样:

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

用注释包裹的中间这一句就不会被删除

参考:

https://blog.csdn.net/Candy_home/article/details/79646655

vue-cli 打包编译 -webkit-box-orient: vertical 被删除解决办法的更多相关文章

  1. 在vue中使用 layui框架中的form.render()无效解决办法

    下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法. 原文地址:小时刻个人技术博客 > http://small.aiweimeng.top/index.php ...

  2. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  3. Vue Cli 打包之后静态资源路径不对的解决方法

    cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...

  4. cordova+vue 项目打包成APK应用遇到的问题和解决方法

    公司前端界面用的是vue,我要嵌入到Android中生成App第一步:安装nodenode安装:直接进入官网https://nodejs.org/zh-cn/,下载最新版本安装.安装之后在命令行中使用 ...

  5. vue页面加载前显示{{代码}}的原因及解决办法

    进入正题,简单说说自己对html中出现{{}}的原因及解决办法: 这样写的话,就会出现{{}}一闪的情况: 原因:html的加载顺序: 解析html结构 -> 加载外部脚本和样式表文件 -> ...

  6. Ubuntu下Code::Blocks无法编译 /bin/sh: 1: g++ not found 解决办法

    Linux下Code::Blocks无法编译运行提示 /bin/sh: 1: g++ not found 的解决办法 今天在Ubuntu 12.04 软件中心中选装了Code::Blocks,安装完成 ...

  7. IDEA 编译时 报 “常量字符串过长” 解决办法

    从eclipse 工具转到 IDEA 工具的时候,出现了一些问题,在这里记录一下,以便之后使用到,废话不多说. 在编译项目时,出现错误为:"常量字符串过长" ,我当时想这个问题需要 ...

  8. VS中编译出现——计算机中丢失XINPUT1_4.dll解决办法

    如果用DX SDK 2010的版本,编译时可能就会出现这种问题. 解决办法,在链接库时把XInput.lib换成XINPUT9_1_0.LIB,重新编译就可以了. 用老操作系统 + 老DX SDK + ...

  9. IAR升级之后,编译stm32官方工程报错的解决办法

    IAR升级之后,打开stm32官方例程,编译时提示如下错误: Error[Pe147]: declaration is incompatible with "__nounwind __int ...

随机推荐

  1. HashTable和HashMap

    参考自: http://blog.csdn.net/tgxblue/article/details/8479147 HashMap和HashTable的异同: 1 HashMap是非线程安全的,Has ...

  2. Linux(Ubuntu 16) 下Java开发环境的配置(三)------Mysql配置

    前言 吐槽一句,如果在Ubuntu在默认情况下是只有最新的MySQL源的,即如果使用"sudo apt-get install mysql-server mysql-client " ...

  3. Eclipse 设置背景色

    window -> preferences ->  General -> Editors -> Test Editors -> Background color 勾掉Sy ...

  4. mpvue——修改第三方组件样式

    前言 我们都知道在vue中可以定义多个<style>,一般为了防止全局污染,我们会使用<style scoped>代表这里面的css样式只在本页面生效. 全局 这个当时测试是直 ...

  5. 「CF1154F」Shovels Shop【背包DP】

    题目链接 [洛谷传送门] 题解 非常简单的背包. \(f[i]\)表示购买\(i\)个物品所需要最少的花费. 不考虑免费的限制条件,那么一定是选择前\(k\)个双鞋子. 那么加入免费的条件,那么还是要 ...

  6. hdu 2829 Lawrence(四边形不等式优化dp)

    T. E. Lawrence was a controversial figure during World War I. He was a British officer who served in ...

  7. WinForm文件说明

    以上位置,双击即可. 界面可以通过拖动控件,也可以通过背后的界面代码去布局. 如果删除了事件代码,界面可能报错,因为界面代码中有未删除的残余(波浪线提示处代码,直接删除即可). 对于多个窗体,Prog ...

  8. python操作文件练习,配置haproxy

    在使用python操作文件的时候,特别是对于网络设备,通常操作配置文件,会简化配置量,配置文件加载到内存中,运行时使用的是内存中的配置,内存中配置修改后立即生效,如果不将配置内容保存到硬盘中,则下次重 ...

  9. R语言统计学习-1简介

    一. 统计学习概述 统计学习是指一组用于理解数据和建模的工具集.这些工具可分为有监督或无监督.1.监督学习:用于根据一个或多个输入预测或估计输出.常用于商业.医学.天体物理学和公共政策等领域.2.无监 ...

  10. 解读Scrapy框架

    Scrapy框架基础:Twsited Scrapy内部基于事件循环的机制实现爬虫的并发.原来: url_list = ['http://www.baidu.com','http://www.baidu ...