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
})

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 详解webpack分离css单独打包

    这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了 打包成多个CSS文件的方法. 瞎扯 webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中. 但是有时候需要把样式 单独的打包成一个文件, 然后放到 CND上, 然后缓存到浏览器客户端中 一.extract-text-webpack-plugin 使用方法 这个操作很简单的,只需要一个插件就好了,就是e

  • 详解webpack和webpack-simple中如何引入css文件

    详解webpack和webpack-simple中如何引入css文件

    博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simple两个东西引入css文件有点区别. 首先说一下如何在webpack中引入css文件吧.博主的webpack是最新版本,不知1.0版本的是如何,所以下面说的是2.0以后的版本.首先在命令行中新建一个vue项目,如何新建请看我之前发的一篇博文,因为在webpack中,本身就有一个css-loader,

  • 详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)

    最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结 为什么是webpack 1.webpack一下自己就

  • Webpack中css-loader和less-loader的使用教程

    Webpack中css-loader和less-loader的使用教程

    前言 在Webpack中,通过css-loader,可以实现在js文件中通过require的方式,来引入css.下面来看看详细的介绍吧. 一.css-loader 我们需要在js文件里,通过require的方式来引入css,我们来看具体的方法,首先需要安装css-loader, style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css). npm install css-loader,style-loader --save-dev 然后在main

  • 详解webpack打包vue时提取css

    webpack打包vue项目的时候默认会把vue里的css打包到页面上. webpack.config.js里的plugins加上以下配置 new webpack.LoaderOptionsPlugin({ test:/\.vue$/, options: { vue: { loaders: { css: ExtractTextPlugin.extract({ fallback:'vue-style-loader', use:'css-loader', publicPath:"../"

  • Webpack打包css后z-index被重新计算的解决方法

    Webpack打包css后z-index被重新计算的解决方法

    发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 !important,经过 OptimizeCssAssetsPlugin 调用 cssProcessor cssnano处理之后也是 z-index: 2. 因此,很可能是 cssnano 进行了重新计算(cssnano 称为 rebase),而且这种计算是不够准确的. 因为打包后的文件有两处 z-

  • webpack打包并将文件加载到指定的位置方法

    使用webpack打包,最爽的事情莫过于可以直接require文件了,但是这 同时带来了一个问题,就是所有的文件整合到一起,那这一个包就太大了. 基于此:下面我们来了解下webpack的打包(主要是将如何将我们需要的内容模块,分开打包, 并且按照我们自己设定的存放路径进行存放) 首先在webpack.config.js文件中 entry入口函数出表示出哪些是需要单独打包成一个js包的: entry: { main: path.resolve(__dirname,'src/index.js'),

  • 基于vue打包后字体和图片资源失效问题的解决方法

    1. vue打包后font-awesome字体失效 解决方案: 2. 打包后图片资源失效 解决方案: 针对html中引用的图片 针对css添加的背景中引用的图片 以上这篇基于vue打包后字体和图片资源失效问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 解决vue打包之后静态资源图片失效的问题 vue cli使用绝对路径引用图片问题的解决 详谈vue+webpack解决css引用图片打包后找不到资源文件的问题 vue-cli中打包

  • spring boot 打包jar jar没有主目录清单问题的完美解决方法

    1.在POM.xml文件下添加如下代码:注意:version.configuration.executions三个标签是我后来查找添加的,网上解决方案要么没有这三个要么不一样,我试了都不行,而且我在我电脑试了这三个标签必须有: 2.如果没有version标签会在生成时会报错. 3.如果没有configuration.executions两个标签生成的jar会报jar没有主目录清单错误: 哀  折腾一天,没办法谁让自己是小白那.还有一个主意的:packaging标签页必须有: <packaging

  • nginx配置域名访问时域名后出现两个斜杠//的解决方法

    最近这两天重新写了一下我的个人网站,在阿里云新买了一台服务器,配置好以后出现了一个问题,就是输入域名后域名地址会自动在后面追加两个斜杆 并且网站还访问不了,仔细观察nginx配置后发现发现如下 解决办法 我们应该在nginx配置的路径后面加一个/ 配置完成后 保存重启 再次访问 就没有问题了 附配置文件 server { listen 80; server_name wx.pyxrsj.cn; include /etc/nginx/default.d/*.conf; location / { p

  • vite2打包的时候vendor-xxx.js文件过大的解决方法

    vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,这就郁闷了. 打包时遇到警告 输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk) Some chunks are larger than 500kb after minification. Consider: Using dynamic import() to code-split the

  • SpringMVC架构的项目 js,css等静态文件导入有问题的解决方法

    SpringMVC架构的项目 js,css等静态文件导入有问题的解决方法

    发生原因 <servlet> <servlet-name>springmvc-mybaits</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> <init-param> <param-name>contextConfigLocation</param-name> &l

  • java中hasNextInt判断后无限循环输出else项的解决方法

    话不多说,上来就是干! ?12345678910111213141516171819202122232425262728293031323334353637 import java.util.Scanner; public class Test_hasNextInt { /** * @param args */ public static void main(String[] args) { // TODO Auto-generated method stub Scanner sc = new

  • C# ComboBox控件“设置 DataSource 属性后无法修改项集合”的完美解决方法

    由于毕业后工作没有对接到专业问题,导致四五年没有碰过Winform程序了.突然由于工作问题,为了方便自己,所以想自己写写小winform小软件,用于自己使用.在使用ComboBox控件时,遇到了重新绑定赋值出问题的情况. 错误代码如下: if (CustomerBLL.select().Rows.Count > 0) { cbTcid.Items.Clear(); cbTcid.DataSource = CustomerBLL.select(); cbTcid.ValueMember = "

  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

随机推荐