如何在没有@import的情况下加载组件的SCSS

Question

我开发了一个小的浮动动作组件。该组件由.ts，.html和.scss文件组成。目前我将scss文件导入app.scss。

有没有办法在使用组件时自动加载SCSS？

Answer 1

我假设您了解ComponentMetadata上的styles和styleUrls属性。

AFAIK，你不能通过styleUrls传递原始的，未编译的.scss文件，但是设置模块加载器以便透明地处理编译步骤相当容易。

如果您的模块加载器是webpack，则尤其如此：有关webpack配置的一个示例，请参阅here，该示例允许您在应用程序的任何位置添加scss文件，然后使用它们like so：

@Component( {
  selector     : "app",
  styles       : [ require( './app.scss' ) ],    
  template     : `<route-view></route-view>`,
} )
export class AppContainer {}