Angular 4+ 模块与 scss 导入共享

Question

我遇到了一个有角度的项目。让我们称之为项目 A。项目 A 已经完成，它有很多有用的组件，比如自己的材料组件（自己的选择，自己的复选框......等等......）。这次我需要创建项目 B，但将来可能项目 C、D、E .. 即将到来。我想在不发表的情况下与他们分享这些材料。所以我在项目A中创建了材料模块。这个模块声明并导出了材料组件。在（新）项目 B 中，我相对导入了材料模块。显然是因为我想使用他的组件。不幸的是，材质组件的样式是用 scss 编写的。

我也在项目中使用变量。为什么不？当这是 scss 最强大的功能之一。所以我创建了一个包含 scss 变量函数 mixins 等的全局文件。我是这样导入的：

@import "~scss/_global.scss";

.material-componenet{
 color: $variableFromGlobal;
}

项目 A 仍在正常工作。另一方面，当我构建项目 B 时，它没有找到“~scss/_global.scss”文件，因为它正在项目 B 中寻找它。我想避免代码重复。 （A B C D E ..在树形结构中可以相距很远）

我知道这是一个特殊的问题，但任何想法都会有所帮助。

感谢您的时间和回答！

Answer 1

有趣的问题，我假设您对所有项目都使用 node_modules 或 src 文件夹。

1. 如果项目 A 是一个已经通过npm 发布的模块，那么你就可以照做

   @import "~project1/scss/_global.scss"

~ 符号将查看 node_modules。

1. 如果项目A是src或src之外的文件夹，你可以这样做

   @import "../lib/project1/scss/_global.scss"

import 理解相关链接。