不同 Angular 模块的独立 CSS

【问题标题】：Seperate SCSS for different Angular modules不同 Angular 模块的独立 CSS
【发布时间】：2019-04-04 09:55:21
【问题描述】：

有没有办法为单独的模块分离 scss。详细来说，如果我有 2 个名为 module_1 和 module_2 的模块以及 2 个名为 module_1.scss 和 module_2.scss 的 scss 文件。我希望我的 angular module_1 加载除 module_2.scss 之外的其他 scss，同样对于 module_2，我不希望 module_1.scss 被加载。我怎样才能在角度上实现这一点。

提前致谢。

【问题讨论】：

标签： angular sass angular-ui-router

【解决方案1】：

由于 Angular 在组件级别导入了样式，您可以创建 module_1.scss 和 module_2.scss -- 然后为模块中的每个容器级别组件，将适当的 scss 文件添加到样式数组中

示例模块_1 > 组件_foo

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['../module_1.scss']
})

示例模块_2 > 组件栏

@Component({
  selector: 'app-bar',
  templateUrl: './bar.component.html',
  styleUrls: ['../module_2.scss']
})

因此，我建议尝试将组件分组到其他小型/愚蠢子组件的父“容器”中，这样只有父级需要导入样式

【讨论】：