什么是 postcss-add-namespace？
postcss-add-namespace 是一款 postcss 插件，它可以为 CSS 选择器添加命名空间以避免样式冲突。它会在所有的 CSS 规则中添加指定的命名空间前缀，同时也会修改 @keyframes 规则中的选择器。
安装和使用
你可以通过 npm 安装 postcss-add-namespace。
npm install postcss-add-namespace --save-dev
在已有的 postcss 插件链中加入 postcss-add-namespace 插件即可使用。
比如，在 webpack 中使用 postcss-loader 时，可以这样配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- ---------
---- -
- ------- -------------- --
-
------- -----------------
-------- -
------ ----------
-------- -
---------------------------------- ---------- --------------- ---
-- ----
-
-
-
-
-
-
-
-这里设置了命名空间为 .my-namespace。
使用示例
假设有如下 CSS 代码：
-- -------------------- ---- -------
-------- -
------ ----
-
---------- ------- -
---- -
-------- --
-
-- -
-------- --
-
-通过 postcss-add-namespace 插件加入命名空间后，会变成以下代码：
-- -------------------- ---- -------
------------- -------- -
------ ----
-
---------- -------------------- -
---- -
-------- --
-
-- -
-------- --
-
-通过加入命名空间，所有选择器都会自动被添加前缀，这样样式就不会与其它组件的样式冲突了。同时，在 keyframes 规则中，选择器也会自动更新。
总结
通过 postcss-add-namespace 插件，我们可以非常方便地为 CSS 添加命名空间，以避免冲突。它可以很好地与其它 postcss 插件结合使用，为我们的前端开发提供了很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedd974374d206107965c8a