zoukankan      html  css  js  c++  java
  • [ -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,这个的意思是删除注释。这样打包时就注释和这行代码就不会连在一起了

  • 相关阅读:
    centos7 源码安装python3
    gitlab 迁移
    gitlab 搭建
    亚伦史沃茨 公开信
    误删了sudo包怎么办
    在中国历史上,我个人最喜欢的三个皇帝
    安装PHP7
    Mac OS上设置Django开发环境
    The Pragmatic Programmer Quick Reference Guide
    Nginx的第一个模块-HelloWorld
  • 原文地址:https://www.cnblogs.com/_error/p/9766845.html
Copyright © 2011-2022 走看看