[ -webkit-box-orient: vertical ] 打包后丢失问题

vue项目中,多行文本样式显示省略号,用到了-webkit-box-orient: vertical这个属性,本地正常,打包线上后,该属性丢失。webpack打包时把这个样式过滤掉了。

网上解决方案有以下:

1. 加上这注释命令

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

2. optimize-css-assets-webpack-plugin 从这个插件的问题源头解决

注释掉webpack.prod.conf.js中下面的代码

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

这段代码实现了css的压缩 注释后css就没有压缩,所以 还要在utils.js中添加,  minimize:true

const cssLoader = {
   loader: ‘css-loader‘,
   options: {
     sourceMap: options.sourceMap,
     minimize:true
   }
 }

3. 在 webpack.config.js 文件中,找到 new webpack.optimize.UglifyJsPlugin,在里面添加一条 mangle:false,这个的意思是删除注释。这样打包时就注释和这行代码就不会连在一起了

原文地址:https://www.cnblogs.com/_error/p/9766845.html

时间: 2024-10-08 10:29:15

[ -webkit-box-orient: vertical ] 打包后丢失问题的相关文章

健康养生 (flex 兼容写法在打包后丢失、安卓4.4显示错误)

此次项目需要兼容 andriod 4.4 ,ios 8 . 故此带来了不少兼容问题 1. vue 项目在本地表现正常,打包后出现部分样式丢失. 如果只是小范围的影响,可以用以下注释跳过 webpack 对 css 的压缩计算 /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ 大范围的样式更改,可以直接修改  / build / webpack.prod.conf.js  文件(相关文章) /

unity Android 打包后读取 xml 文件

问题:    前天在做东西的过程中发现了一个让人很纠结的问题,为什么Unity 程序在PC上测试一点都没问题但是打包发布到Android后却无法读取XML文件. 通过查找自资料发现打包发不到安卓后的路径和PC上测试时的路径发生了变化,因此读取就出bug了. 那么解决方法很简单: 1,建立一个新工程 2,添加两个GUItext组件一个用于显示测试平台另一个用于显示读取到的XML数据, 如下: 3,该贴代码了 //-------------------------------------------

Advanced Installer 打包后,安装包在WIN10下重启后再次运行安装的解决办法

原文:Advanced Installer 打包后,安装包在WIN10下重启后再次运行安装的解决办法 前几个月使用Advanced Installer 打包了一堆安装包,其中有使用默认主题的,也有根据UI设计更改过一些功能的,当时在Windows7下测试没有任何问题,就直接上线给用户使用了. 这两天在禅道上发现指派了一个BUG过来,描述的内容是在Windows10下安装包会出现重启后再次自动运行的问题,见鬼了,没有写过自启动注册表啊,马上打开工程查看,发现了一个很奇怪的现象,下面来介绍. 1.当

C#项目打包后安装的桌面快捷方式图标怎么设置成自己想要的图标

#项目打包后安装的桌面快捷方式图标怎么设置成自己想要的图标 2012-08-25 09:11匿名 | 浏览 3286 次 C#编程 C#项目用vs2005自带的工具打包后安装的桌面快捷方式图标怎么设置成自己想要的图标,就想QQ安装之后在桌面的快捷方式一样 2012-08-25 09:21网友采纳 在创建快捷方式的时候是可以指定图标的啊.当然你最好把那图标文件(扩展名是ico)放在打包的文件夹中,不然你是不能指定的.

解决Pyqt打包后运行报错:应用程序无法启动 因为程序的并行配置不正确

做了一个生成二维码的小程序:http://www.cnblogs.com/dcb3688/p/4241048.html 直接运行脚本没问题,用pyinstaller打包后再运行就直接报错了: 应用程序无法启动 因为程序的并行配置不正确.有关详细信息,请参阅应用程序事件日志,或使用命令行 sxstrace.exe 工具. 网上找的解决方法: 1.   安装Microsoft Visual C++ 2008 Redistributable 2.  开始 - 运行(输入services.msc)- 确

[Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题

之前说过 sencha phonegap init com.pushsoft.myapp MyApp 之后打包的程序安装包apk的名字是"MyApp.apk",显示在手机桌面上的程序名称(图标下面的文字)也是"MyApp" 如果要换成其他名字,修改 MyApp\config.xml 文件,把顶部"<name>MyApp</name>"中间MyApp的改成需要的名字. 注意如果xml内容有中文,要改成utf-8编码,注意是文

重启或杀掉nginx进程后丢失nginx.pid

报错:     nginx: [error] invalid PIDnumber "" in "/usr/local/nginx1.6.3/logs/nginx.pid" 原因:     重启或杀掉nginx进程后丢失nginx.pid 解决:     /usr/local/nginx/sbin/nginx -c/usr/local/nginx/conf/nginx.conf 详解:     使用nginx -c的参数指定nginx.conf文件的位置

appcan打包后产生的问题总结

以appcan为基础的项目,最终需要打包后进行调试.在调试过程中,主要的样式问题在苹果手机上,下面将这些问题总结起来,以防下次再犯. 1:ios 7 以上的手机中,状态栏与内容重叠: 问题描述:在ios7 系统以上的手机中,我们会发现状态栏的距离很小,导致与内容页重叠.而低版本的ios系统手机不会出现这种问题,安卓手机上都不会产生这种问题,所以我们需要在js中判断设备的类型,然后给状态栏添加距离. 解决方法:我们在js中添加以下代码,并在css中添加如下样式: //ios状态栏适配 window

android 更新到高德地图2.X.X版本,打包后地图提示invalid_user_scode

高德地图2.X.X以前的版本将在2015年2月28日停用,所以前段时间把高德的几个包都更新了,也同时申请了新的key,可是今天准备打包发布,打完包后,地图不能用了,提示invalid_user_scode,查阅了一下资料情况是:  确保在工程中添加的key为9月23日之后注册的.在debug模式下,或者最终打包签名release模式时,App的签名文件是不一样的:所以对应的Key的sha1值也应该同步替换:当使用不同的IDE调试或打包同一个工程时,也请确保IDE中的签名文件是同步过的. 这里讲的