覆盖来自不同项目的 sass 变量

【问题标题】：Override sass variable from different project覆盖来自不同项目的 sass 变量
【发布时间】：2019-06-08 13:40:22
【问题描述】：

我有多个项目，我想覆盖来自两个不同项目的 scss 颜色变量。

例如，如果我正在运行项目 A，我希望 $primaryColor 为红色如果我正在运行项目 B，我希望 $primaryColor 为绿色

我的项目树 - 项目_A - 项目_B - Shared_Component_Library - Style_Library - color_palette.scss

Project_A 和 Project_B 都在使用 Shared_Component_Library 并且 Shared_Component_Library 从 Style_Library 获取其样式。

当我运行不同的项目时，如何使用不同的值覆盖 scss 颜色变量？

如果它有助于我使用 angular-cli 来构建这个多个项目

【问题讨论】：

【解决方案1】：

有很多方法....

第一：

您必须在每个项目中放入一个小的 scss 文件，并覆盖变量...这些文件应该包括您共享的 scss 文件...但它会创建 2 个文件...。

上半场：

如果您不想复制整个 css 文件，您可以将需要覆盖的 scss 组件提取到另一个文件中，这将被复制...

第二：

如果你不受限制并且可以排除IE11（看这里https://caniuse.com/#feat=css-variables），而不是使用scss变量，你可以只使用css变量...

PS：

我没有给你一些代码，也许你需要看看如何包含和覆盖？

你可以看看 bootstrap 4 是如何用 scss 完成的，你会看到变量是如何完成的......

【讨论】：