web-dev-qa-db-fra.com

Comment utiliser Angular 4 avec SASS

Je commence mon premier projet en utilisant Angular4 et sass et j'essaie de comprendre comment travailler avec sass de manière appropriée. J'utilise angular-cli et ai déjà défini le style par défaut pour utiliser la syntaxe scss. J'ai aussi déjà défini la compilation, etc.

Cependant, j'ai constaté que nous avions une option styleUrls sur le composant, dans laquelle, dans certains cas, nous définissons des styles utilisés uniquement dans ce composant.

Le problème est que, lorsque je définis un fichier scss dans component, il ne génère pas son propre fichier .css, ni étant inclus dans le fichier .css principal, généré à partir du projet racine.

Donc, fondamentalement, j'ai une structure de projet comme celle-ci:

app
    app.module.ts
    app.routing.ts
    home
        home.component.ts
        home.html
        _home.scss
    client
        client.component.ts
        client.html
        _client.scss
scss
    _imports.scss
    colors
        _colors.scss
    ui
        _button.scss
        _table.scss
    //.. more folder and files
styles.scss
index.html

Et j'aimerais pouvoir définir le style principal css dans le fichier styles.scss, qui sera inséré ultérieurement dans le fichier index.html lors du processus de construction. Mais aussi être capable de générer un seul fichier css pour chaque composant que j'ai, par exemple. home et client, et n'utilisez que ces styles css dans leur propre component.

Est-il possible de le faire? J'ai essayé de le faire et je n'ai trouvé aucune autre ressource à ce sujet!

cssangularsassangular-clicss-preprocessor
12
celsomtrindade

Dans un Angular 4.4+ avec ng-cli, il vous suffit de modifier les paramètres suivants dans .angular-cli.json

{
  ...
  "apps": [
    ...
    "styles": [
        "styles.scss"
      ],
      ...
  ]
  ...
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

et dans chaque composant, si nécessaire, remplacez .css par .scss

@Component({
    selector: 'app-your-component',
    styleUrls: ['./your-component.component.scss']
})
5
creep3007

Vous pouvez spécifier scss lorsque vous créez un projet.

ng new project-name --style scss
2
rch850

j'ai eu le même problème, j'ai un composant leftnav et son scss semblait ne jamais avoir été compilé, j'ai essayé tout ce qui précède, mais je n'ai pas fonctionné, et j'ai essayé de créer une nouvelle application en utilisant ng nouveau .... mais après, je l'ai eu corrigé en changeant mes pensées: D 

il semble que nous ne puissions pas utiliser same component selector dans son fichier .scss relatif .__, mais nous devrions plutôt utiliser un div d'habillage avec un nom de classe approprié et utiliser ce .className comme un habillage racine du contenu du fichier .scss.

laissez-moi démontrer, ceci est mon application: 

app/component/leftnav
  |leftnav.scss
  |leftnav.html ==> simply `left nav works!`
  |leftnav.ts ==> selector leftnav
app/
  |app.html
  |app.scss

et à l'intérieur de la vieille leftnav.scss

leftnav{
    background:red;
}

et à l'intérieur app.html 

<leftnav></leftnav>

et comment je l'ai fait réparer! comme je l'ai dit en ajoutant un div de wrapping avec le nom de classe .leftnav à l'intérieur de leftnav.html et en l'utilisant comme wrapping racine de my leftnav.scss au lieu du sélecteur de composant 

donc mon nouveau

.leftnav{
    background:red; 
}

et il fonctionne ! 

0
Moath.Omar