覆盖节点模块中的 css 选择器答案

【问题标题】：Overwriting css selectors in node modules覆盖节点模块中的 css 选择器
【发布时间】：2020-08-04 02:53:17
【问题描述】：

我不时读到在 node_modules 中覆盖 css 选择器是不好的做法。好的做法是在您自己的项目中使用更具体的选择器覆盖样式表。有人可以向我解释一下为什么这是不好的做法。

举个例子，我使用了 ngx-bootstrap 日期选择器，并且不得不针对应用程序进行调整。为此，我在 bs-datepicker.css 文件中添加了一个自定义主题。 bs-datepicker.css 文件最终被放到了 app 文件夹中，所以通过 gitlab 拉取项目的每个人在通过 npm 安装依赖项时都会自定义 datepicker。

是否可以说这取决于，或者在这里扩展节点模块的 css 甚至覆盖选择器从根本上来说是一种不好的做法？

【问题讨论】：

当你说bs-datepicker.css 文件最终被放到了app 文件夹中你的意思是它位于node_modules 文件夹之外的app 文件夹中？还是您的意思是在您的应用文件夹的 node_modeuls 文件夹内？
正确，它位于 app 文件夹中，在 node_modules 文件夹之外。
在那种情况下它完全没问题，糟糕的用例是@Shlok Nangia 在他的回答中提到的

标签： css angular node-modules

【解决方案1】：

您的节点模块只会留在您的计算机中。如果其他人使用您的代码并尝试运行 npm install ，他们不会让您手动更改 CSS。

此外，如果您更新了 node_modules，那么您的更改也将被覆盖

因此，建议您在代码中而不是在节点模块中进行更改。您可以在代码中使用 ::ng-deep 来更改库中的某些 css

【讨论】：

您对 node_modules 部分是正确的。关于::ng-deep，他需要使用它，以防万一他将覆盖 css 选择器放在他的一个组件中。如果他将它们放在一个通用的 css 文件中，他就不需要它。