webpack打包后样式丢失问题

VUE项目在本地运行样式没有问题,上线后发现样式没有生效,在浏览器调试模式下,发现-webkit-box-orient: vertical;属性没了。

.xx{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

定位问题

webpack打包时autoprefixer自动移除老式过时的代码,https://github.com/postcss/autoprefixer/issues/776

解决方法

.xx{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
}

补充方法:

将打包OptimizeCSSPlugin配置添加autoprefixer:{remove: false}

//文件: build/webpack.prod.conf.js或者build/webpack.build.conf.js
new OptimizeCSSPlugin({
    cssProcessorOptions: config.build.productionSourceMap ?
        { safe: true, map: { inline: false }, autoprefixer:{remove: false} } :
        { safe: true }
}),

参考:https://www.npmjs.com/package/autoprefixer

标签: SASS, webpack, autoprefixer

除单独说明外,文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

已有 2 条评论

  1. autoprefixer 加上 remove: false 的参数,感觉更轻松 。

    1. 我下来试试,谢谢:)

添加新评论