角2：現在のコンポーネントに対するstyleUrlsですか？

Question

styleUrlsを使用して角度2コンポーネントにスタイルを追加する際にいくつか問題が発生しました。

パス/ main.component.ts

@Component({ 
    selector: 'app-view', 
    styleUrls: ['./styles/style.css'], 
    template: //... 
}) 

パス/スタイル/ style.cssに

.main-wrapper { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    background: red; } 

そして何も起こらない：ここで

は、私はそれを使用する方法です私のブラウザで。 私が試した：

• 絶対パス
• ルート・コンポーネントからの相対パス。

は私も試してみた：

• が'./styles/style.css'のように異なる構文でこれを書くために、'styles/style.css'
• 私style.css次の私のコンポーネントに移動します。

しかし、私はそれを動作させることはできません。

Answer 1

styleUrlsを使用しないでください。拡張子がscssのスタイルファイルの名前を変更するだけです。スタイルシートは自動的に使用されます！

したがって、私のコンポーネントのファイルは次のようになり、そしてスタイルで動作します：公式ドキュメントを引用

• mycomponent.ts
• mycomponent.html
• mycomponent.scss