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

Question

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

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

Answer 1

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

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

如果您的模块加载器是 webpack，则尤其如此：参见 here for one example of a webpack configuration that allows you to add scss files anywhere in your app and then use them like so：

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

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

How to load SCSS of a component without @import

ionic-framework

ionic2

angular