javascript - Blir indigo pink-temat helt initierat när man kör ng add @angular/material och scss?

När vi kör ng add @angular/material frågar det vilket CSS-ramverk och vilken tema vi vill ha. Jag valde indigo-pink och scss. Behöver vi göra något mer, eller får materialkomponenterna bara temat applicerat automatiskt?

Med vanlig CSS (ingen CSS-ramverk) lägger vi till detta i styles.css:

@import “~@angular/material/prebuilt-themes/indigo-pink.css”;

Jag antar att Angular bara gör detta automatiskt nu eftersom CSS-temat är inkluderat i angular.json, men jag ser inte att stilarna renderas automatiskt. Här är en skärmdump av stegarna:

Försökte lägga till följande i styles.scss men felet finns fortfarande kvar:

    /* You can add global styles to this file, and also import other style files */
    @import '~@angular/material/theming';
    // Plus imports for other components in your app.

    // Include the common styles for Angular Material. We include this here so that you only
    // have to load a single css file for Angular Material in your app.
    // Be sure that you only ever include this mixin once!
    @include mat-core();

Uppdatera

Jag skapade ett helt nytt projekt och testade den minimala inställning jag har ovan med samma val och nu fungerar det, så jag gjorde förmodligen ett litet misstag någonstans. Jag lämnar detta uppe ifall någon stöter på ett liknande problem.

Svar #1

Om det vore en scss-fil kan det finnas en skillnad eftersom det kan finnas variabler i den som du vill referera till i din stilfil. Eftersom det är en css-fil kan den enda skillnaden möjligen vara ordningen.

Om du har regler i styles.scss kan de bli åsidosatta av indigo pink-stilarna, men detta skulle bara hända om indigo pink kommer efter ditt stilark i angular.json.