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

news2024/11/23 0:38:35

前言

👏问题合集更更更之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。

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