Visual Studio 2017 - Angulaire - Webpack - SASS - style non appliqué

Question

J'ai créé une nouvelle application angulaire de Visual Studio. Il n'avait pas de support pour sass.

J'ai installé node-sass, raw-loader et sas-loader et a ajouté cette ligne dans webpack.config.js:

{ test: /\.scss$/, loaders: ["raw-loader", "sass-loader"] } 

j'ajouté ceci dans mon élément d'accueil:

styleUrls: ['./home.component.scss'] 

la Le fichier home.component.scss contient uniquement les éléments suivants:

.body { 
    background-color: red 
} 

Le site qui fonctionne sans erreur, mais le fond est blanc. En outre, je ne vois pas et le fichier css correspondant (où devrait-il être?).

Answer 1

Dans le modèle de studio visuel vide, '.body' ne correspond à aucun élément du composant home.

pour tester, essayer 'home.component.scss':

$primary-color: red; 
h1 { 
    color: $primary-color; 
} 

Il n'y a pas de fichier CSS correspondant, compilé est écrit css à une balise de style en html:

<style> 
h1[_ngcontent-c2] { 
    color: red; } 
</style>