问题合集更更更之cssnano配置导致打包重新计算z-index

前言
👏问题合集更更更之cssnano配置导致打包重新计算z-index~
🥇记得点赞+关注+收藏！
1.问题描述
代码中写了样式代码，z-index层级关系
z-index：2029;
进行打包之后，发布到环境中，发现层级变了
z-index：4;
2.问题原因
首先排查打包配置，发现有引入cssnano（版本5.x），并有如下配置
css: {
postcss: {
plugins: [
cssnano({
preset: “advanced”,
}),
],
},
},
preset表示传递一个预设以选择一组预先配置的优化，advanced则是应用一系列高级优化。cssnano的预设为advanced，在优化时就会重新计算和重新排序 z-index 值，导致z-index数值超出预期。
3.解决步骤
注：cssnano版本不同，配置项存在变化
❝
在保留advanced高级优化的前提下，单独设置zindex: false ，不进行重新计算和重新排序；
vite.config.js:
export default defineConfig({
css: {
postcss: {
plugins: [
cssnano({
preset: [“cssnano-preset-advanced”, {
// 打包不修改zIndex
zindex: false ,
// … 其他配置
}],
}),
],
},
},
});
4.cssnano了解
介绍
‌cssnano是一个基于PostCSS的CSS优化工具。
cssnano的主要功能是对CSS文件进行多方面的优化，以确保最终生成的文件对生产环境来说体积是最小的。它通过采用格式良好的CSS并通过许多优化措施，来确保最终的生产环境中的文件尽可能小。
cssnano的优化措施可能包括但不限于压缩CSS代码、合并选择器、删除未使用的样式等，从而减小文件大小，提高网页加载速度。这种优化对于大型且杂乱的CSS文档尤为重要，因为如果CSS文档大且杂乱，网站的加载时间就会变长。通过使用cssnano，可以有效地管理和优化CSS，使得网站的性能得到提升‌12。
此外，cssnano作为PostCSS的一个插件，可以集成到构建过程中，自动化地处理CSS文件，无需手动进行复杂的优化操作。这对于开发人员来说，不仅提高了工作效率，也确保了网站的性能和用户体验‌
相关地址：
github地址：
https://github.com/cssnano/cssnano
npm地址：
https://www.npmjs.com/package/cssnano
文档地址：
https://cssnano.github.io/cssnano/
安装
cssnano是一个PostCSS插件，所以运行cssnano还需要安装PostCSS。
npm install –save-dev postcss-cli
preset支持类型：
default
默认预设，提供基本的 CSS 优化。
advanced
提供更加激进的优化，可能会更改 CSS 的样式，但可能会破坏某些依赖于特定布局的网页。
默认情况下，高级转换没有与cssnano捆绑在一起，所以需要安装预设
npm install cssnano-preset-advanced –save-dev
preset支持多种配置方式：

转换策略
根据配置的预设cssnano，优化是不同的;使用默认预设，我们只提供安全转换。具体支持如下（更多详情参考文档）
Optimisation default advanced lite
autoprefixer ❌ ✅ ❌
cssDeclarationSorter ✅ ✅ ❌
calc ✅ ✅ ❌
colormin ✅ ✅ ❌
convertValues ✅ ✅ ❌
discardComments ✅ ✅ ✅
discardDuplicates ✅ ✅ ❌
discardEmpty ✅ ✅ ✅
discardOverridden ✅ ✅ ❌
discardUnused ❌ ✅ ❌
mergeIdents ❌ ✅ ❌
mergeLonghand ✅ ✅ ❌
mergeRules ✅ ✅ ❌
minifyFontValues ✅ ✅ ❌
minifyGradients ✅ ✅ ❌
minifyParams ✅ ✅ ❌
minifySelectors ✅ ✅ ❌
normalizeCharset ✅ ✅ ❌
normalizeDisplayValues ✅ ✅ ❌
normalizePositions ✅ ✅ ❌
normalizeRepeatStyle ✅ ✅ ❌
normalizeString ✅ ✅ ❌
normalizeTimingFunctions ✅ ✅ ❌
normalizeUnicode ✅ ✅ ❌
normalizeUrl ✅ ✅ ❌
normalizeWhitespace ✅ ✅ ✅
orderedValues ✅ ✅ ❌
reduceIdents ❌ ✅ ❌
reduceInitial ✅ ✅ ❌
reduceTransforms ✅ ✅ ❌
svgo ✅ ✅ ❌
uniqueSelectors ✅ ✅ ❌
zindex ❌ ✅ ❌
配置
可以在项目的根目录下创建postcss.config.js文件来配置cssnano或者在打包配置文件中出来（如vite.config.js）
postcss.config.js:
module.exports = {
plugins: [
cssnano({
preset: [‘default’, {
// 在这里配置或覆盖默认预设中的选项
// 例如，你可以启用或禁用某些特定的插件
// 打包不修改zIndex
{ zindex: false }
// … 其他配置
}],
})
],
};

vite.config.js:
export default defineConfig({
css: {
postcss: {
plugins: [
cssnano({
preset: [“cssnano-preset-advanced”, {
// 打包不修改zIndex
zindex: false ,
// … 其他配置
}],
}),
],
},
},
});
5.写在最后🍒
看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕
更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~