Webpack打包css后z-index被重新计算的解决方法-创新互联
发现问题
成都创新互联公司专注于德阳企业网站建设,成都响应式网站建设公司,电子商务商城网站建设。德阳网站建设公司,为德阳等地区提供建站服务。全流程按需网站策划,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致。
如下图,左侧是源文件,右侧是打包后的文件:
即使加上 !important,经过 OptimizeCssAssetsPlugin 调用 cssProcessor cssnano 处理之后也是 z-index: 2。
因此,很可能是 cssnano 进行了重新计算(cssnano 称为 rebase),而且这种计算是不够准确的。
因为打包后的文件有两处 z-index,这里是第二处,所以此处 z-index 是 2。
解决方法
cssnano 将 z-index rebase 归类为 unsafe,而不是 bug,只有在单个网页的 css 全部写入一个 css 文件,并且不通过 JavaScript 进行改动时是 safe。
参考:http://cssnano.co/optimisations/zindex/
项目中提取了公共的 css,已经对 layout 设置了很小的 z-index,因此受到 cssnano z-index rebase 的影响。
cssnano 默认进行 z-index rebase。
unsafe (potential bug) 优化项默认不开启应该比较友好。
new OptimizeCssAssetsPlugin({ cssProcessor: require('cssnano'), cssProcessorOptions: { discardComments: {removeAll: true}, // 避免 cssnano 重新计算 z-index safe: true }, canPrint: false })
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前名称:Webpack打包css后z-index被重新计算的解决方法-创新互联
文章网址:http://pwwzsj.com/article/dhigpj.html