避免跨项目的 css id 和类变量名冲突答案

【问题标题】：Avoid css id and class variable name clashing across project避免跨项目的 css id 和类变量名冲突
【发布时间】：2020-03-22 15:08:16
【问题描述】：

（除了确保你的类和 id 变量名每次都以不同的方式命名）在一个 css 文件中没有类或 id 名的最佳方法是什么在 react/wepback 项目 中冲突/影响另一个 css 类或不同文件中的 id？

例如：

file.js 有一个名为 container 的 id 或 className 的 div。我的项目中有多个 css 文件，一些 css 文件（超过 1 个）中有 .container 变量。

如果我不想记住以不同的方式命名变量，我如何确保在 webpacking/bundling/npm 启动时这些不会发生冲突？

谢谢

【问题讨论】：

【解决方案1】：

您可以使用CSS modules 来避免css 文件中的名称冲突。通过使用它，您可以本地化选择器名称。

CSS 模块是一个 CSS 文件，其中包含所有类名和动画默认情况下，名称在本地范围内。

如果你想要全局选择器，你可以遵循语法。

:global(.myclass){}

【讨论】：