从 Angular2 NgModule 访问共享样式

Question

我有一个 Angular2 项目（由 angular-cli 生成）。在项目中，我有一个主模块和一个子模块。子模块代表了一个定义明确的概念，因此很适合将其作为（可能可重用的）NgModule。

子模块封装了不同的组件，只向外暴露了一个组件。这一切都很好，它运行良好，因此模块可以重复使用。

但是，该模块确实有一个全局依赖项，这会阻止它成为完全解耦、可重用的模块。 scss 文件使用@import 访问公共scss 文件。通用的scss 文件在模块之外。

因此，具体来说，模块内的scss 样式文件使用相对路径引用模块外的scss 文件，如下所示：

@import './../../../assets/styles/common-props';

我不想将scss 文件复制到模块中。使用常见的scss 文件的最佳方法是什么，以便模块变得易于重用？有最佳做法吗？

Answer 1

不确定这里是否真的有最佳实践。这完全取决于您要如何导入和管理外部 SCSS 资源。

1. 如果您希望通过 Homebrew 或 NPM 更新来更新 SCSS 资源，则可以从其源目录导入它。
2. 如果您想手动控制 SCSS 资源的升级路径，只需将文件移动到您的 SCSS 层次结构中并导入即可。

一般来说，我更喜欢方法 #2。

我有一个名为“libs”的目录，我将外部 SCSS / CSS 文件组织到该目录中，然后简单地从该文件夹结构中导入。

在某些极端情况下我使用 #1，但它们很少见。