在前端开发中，我们常常使用 CSS 预处理器来编写样式。在预处理器编译后的 CSS 中，有时会产生一些空的选择器或者规则，这些无效的 CSS 会增加文件大小和加载时间，降低性能。
为了解决这个问题，我们可以使用 postcss-discard-empty 这个 npm 包来移除这些无用的 CSS。postcss-discard-empty 是一个 PostCSS 插件，可以轻松地集成到你的构建流程中。
安装
你可以通过 npm 安装 postcss-discard-empty：
--- ------- --------------------- ----------
使用方法
- 在你的项目根目录下创建
postcss.config.js文件，并添加以下配置：
-------------- - -
-------- -
--------------------------------
-
-- 在你的构建工具（如 webpack）中添加 PostCSS 插件的 loader：
-- -----------------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-------------
----------------
-
-
-
-
-- 重新构建你的项目。
postcss-discard-empty将自动移除所有空的选择器和规则。
示例代码
Input
-- ---------- -- -- ----- -- --------------- -- -- --------- -- --------- - -- ------ -- - -- ---------- -- ------------------- - ------ ---- -
Output
-- ---------- -- -- ---------- -- ------------------- - ------ ---- -
总结
通过使用 postcss-discard-empty，我们可以轻松地移除无用的 CSS，提高文件加载速度和性能。在实际项目中，我们可以将其与其他 PostCSS 插件一起使用，以优化 CSS 文件，并提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/46702