@importなしでコンポーネントのSCSSをロードする方法

Question

小さな浮動アクションコンポーネントを開発しました。コンポーネントは、.ts、.html、および.scssファイルで構成されています。現時点では、scssファイルをapp.scssにインポートします。

コンポーネントを使用するときに自動的にSCSSをロードする方法はありますか？

Answer 1

stylesとstyleUrlsのプロパティがComponentMetadataにあることをご承知おきください。

AFAIKの場合、コンパイルされていない未処理の.scssファイルはstyleUrlsに渡すことはできませんが、コンパイル手順を透過的に処理するようにモジュールローダーを設定するのはかなり簡単です。

あなたのモジュールローダがWebPACKのある場合、これは特にそうである：あなたはどこでもあなたのアプリでSCSSファイルを追加し、like soそれらを使用することができますWebPACKの構成の一例のためhereを参照してください。

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