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

最新推荐文章于 2024-10-01 20:41:19 发布

码农巧克零

最新推荐文章于 2024-10-01 20:41:19 发布

阅读量591

点赞数 7

文章标签： flutter android spring boot 后端 java

本文链接：https://blog.csdn.net/weixin_47588164/article/details/142516598

版权

前言

👏问题合集更更更之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文件，无需手动进行复杂的优化操作。这对于开发人员来说，不仅提高了工作效率，也确保了网站的性能和用户体验‌

安装

cssnano是一个PostCSS插件，所以运行cssnano还需要安装PostCSS。

css

代码解读

复制代码

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:

java

代码解读

复制代码

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 , // ... 其他配置 }], }), ], }, }, });