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

Question

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

使用组件时，是否有自动加载SCSS的方法？

Answer 1

我假设您知道ComponentMetadata上的styles和styleUrls属性。

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

如果你的模块加载程序是webpack，这一点尤其正确：请参阅此处查看webpack配置的一个示例，该示例允许你在应用程序中的任何位置添加scs文件，然后像这样使用它们：

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