样式.scss "global"到特定模块

Question

随着我的 Angular 5 应用程序的增长，我已经开始将某些类似的component移动到它们自己的module中。

我现在的问题是：是否有可能拥有一个类似于全局style.scss的文件，但范围仅限于一个特定module(而不是整个应用程序(？

即一个文件style-mymodule.scss，将其样式应用于模块mymodule中的所有component(但不应用于任何其他模块(？

Answer 1

下面是一些选项，如果没有一些妥协，这些选项都不能单独对您的模块全局作用：

选项 1：SCSS @import

使用 SCSS @import 导入该模块内所有组件样式表中的style-mymodule.scss。

选项 2：@Component styleUrls

@Component装饰器的 styleUrls 属性采用数组。您可以在此处添加style-mymodule.scss。

选项 3：angular-cli.json styles

在 angular-cli.json 中将style-mymodule.scss添加到全局样式表中。在 style-mymodule.scss 中，添加父类中的所有样式：

.mymodule {
  // add all the module styles here.
}

然后在所有模块组件中使用 host 属性 @Component ：

@Component({
  ...
  host: {'class': 'mymodule'}
  ...
})

请注意，由于这不是一个动态类，因此我使用了 host 属性，而不是对动态类使用 '@HostBinding 的通常首选方法。