如何为 node_module 覆盖 CSS 或重新换肤？答案

【问题标题】：How to override CSS or re-skin for node_module?如何为 node_module 覆盖 CSS 或重新换肤？
【发布时间】：2017-08-11 03:25:31
【问题描述】：

我有一个 node_module https://github.com/Alberplz/angular2-color-picker 我在我的 Angular 2 项目中使用，但作为所有模块，它包含它的 CSS 文件，如果我检查元素，我会在 localhost 中看到，但实际上无法找到它们的位置。

我可以创建一个单独的文件并覆盖，但我将 CSS 放在 CSS 之上会造成更大的混乱，我想重新设置模块的皮肤。

这就是 CSS 现在的样子

有什么建议吗？

【问题讨论】：

标签： css angular node-modules

【解决方案1】：

如果您查看该项目的存储库，您可以找到样式 here。编译后的样式被导入指令here。除了this options，我没有看到任何改变颜色选择器样式的例子。

如果您想覆盖样式，您可能必须使用一些“影子 DOM 破坏”解决方案或全局样式，这些样式将使用更具体的选择器覆盖它，最终使用 !important 关键字。

【讨论】：

!重要的关键字。这是我担心的，因为这是不好的做法:(
如果你不想覆盖样式，你也可以在 Github 上 fork 项目，根据需要进行调整，然后像npm install --save https://github.com/{author}/{repo}/{branch}一样导入
是的，我在回答上说的 :)
“影子 DOM 破坏”是什么意思？
无论是具有足够具体的选择器以不破坏其他任何东西的全局样式表，还是带有角度的，您都可以使用/deep/ .selector 来设置元素的样式，而忽略组件样式中的影子 DOM。

【解决方案2】：

基本上我理解的覆盖模块的步骤是：

本地 fork github 环境
Git 克隆你的分叉环境
在 npm 上注册
将更改应用到您的本地并以不同的名称在 npm 上发布
npm 安装已发布的 npm 包。

【讨论】：

最糟糕的方法...仅仅为几个 css 文件创建一个新项目意味着告别该项目的未来版本，这更值得。
正确行事并保持最新状态就像拉取请求一样简单。唯一的缺点是您要添加到您维护的内容列表中。

【解决方案3】：

此组件在 ngx 组件集 (https://www.npmjs.com/package/ngx-color-picker ngx-color-picker) 中进行了扩展，并且我已经能够通过在 Angular 5 应用程序中的 Index.html 中的标签中覆盖样式来设置样式。 style标签必须在body标签下方

【讨论】：