Comment utiliser Angular 4 avec SASS

Je commence mon premier projet à l'aide de Angular4 et sass et j'essaie de comprendre comment travailler avec sass la bonne façon. Je suis en utilisant angular-cli et déjà définir le style par défaut à utiliser scss de la syntaxe. J'ai aussi déjà défini à la compilation, etc.

Cependant j'ai vu que nous avons une option styleUrls sur le composant, où, dans certains cas, nous définissons les styles utilisés uniquement dans le composant.

Le problème est que lorsque j'ai mis un scss fichier dans ce component c'est de ne pas générer sa propre .css fichier n'étant pas inclus dans les principaux .css fichier généré à partir de la racine du projet.

Donc en gros, j'ai un projet de structure comme ceci:

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 être en mesure de fixer les principales css style à l'intérieur de la styles.scss fichier, qui sera inséré dans le index.html fichier plus tard, sur le processus de construction. Mais aussi être en mesure de générer un seul css fichier pour chaque composant que j'ai, par exemple, home et clientet de n'utiliser ces css styles à l'intérieur de leur propre component.

Est-il possible de le faire? J'ai essayé de le faire, ou de trouver d'autres ressources sur ce sujet, mais rien trouvé.

source d'informationauteur celsomtrindade | 2017-06-22

5

Ce que vous cherchez est la importer la directive:
```
@import "styles.scss";  
@import "css/styles.scss";  
@import url("http://example.com/css/styles.scss");
```
Cela importe le CSS de l'autre les fichiers CSS dans le fichier CSS, en y ajoutant le contenu de chaque fichier pour le fichier principal en fonction de l'ordre que vous choisissez de les insérer.

Notez que vous ne pas besoin de la .scss extension de fichier, comme SASS va gérer automatiquement, et vous pouvez simplement importer avec @import "file". Et vous aussi n'avez pas besoin de spécifier chaque fichier avec un organisme indépendant de l'importation, comme vous pouvez les combiner en une seule importation:
```
@import "styles.scss", "css/styles.scss", url("http://example.com/css/styles.scss");
```
Vous pouvez également faire imbriqués les importations en spécifiant le @import à l'intérieur d'un sélecteur:
```
.global-nav {  
  @import "nav-bkgd";
}
```
Espérons que cette aide! 🙂

Dans Angulaire 4.4+ avec ng-cli, vous avez seulement besoin de changer les réglages suivants dans .angular-cli.json

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

et dans chaque Composante, si nécessaire, de les modifier .css à .scss

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

1

Vous pouvez spécifier scss lorsque vous créez un projet.
```
ng new project-name --style scss
```
0

j'ai eu le même problème, j'ai un leftnav composant et de ses scss semblait ne jamais compilé , j'ai essayé tous les ci-dessus, mais n'a pas fonctionné , et j'ai essayé de créer une nouvelle application à l'aide de ng nouvelles .... mais après que je l'ai eu fixée par l'évolution de mes pensées 😀

semble que nous ne pouvons pas utiliser same component selector à l'intérieur de son parent .fichier scss
mais au lieu de cela, nous devrions utiliser un emballage div avec adapté d'un nom de classe , et l'utiliser .className comme une racine d'emballage de .scss contenu du fichier.

laissez-moi vous montrer, c'est mon app:
```
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 me suis fixé ! comme je l'ai dit en ajoutant un emballage div avec la classe .leftnav à l'intérieur de leftnav.html et l'utilisation de son que la racine de l'emballage de mon leftnav.scss au lieu de composant sélecteur de

donc mon nouveau
```
.leftnav{
    background:red; 
}
```
et ça marche!!!
0

Si vous avez déjà wokring projet ng new my-sassy-app --style=scss ne va pas aider si vous avez besoin d'utiliser ng set defaults.styleExt scss cela change angular.cli.json fichier
```
"defaults": {
  "styleExt": "scss",
  "component": {
 }
}
```
Maintenant modifier la déjà présent css fichiers scss extension, vous devriez voir que scss est maintenant opérationnel.N'oubliez pas de changer le css extensions dans votre composant definations à scss
La source

Vous devez vous connecter pour publier un commentaire.