J'ai lu le documentation , qui dit que si je veux utiliser scss
je dois exécuter la commande suivante:
ng set defaults.styleExt scss
Mais quand je fais cela et crée ce fichier, je reçois toujours cette erreur dans ma console:
styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/Egen/Code/angular/src/styles.css'(…)
Comment puis-je réparer ça?
Pour Angular 6 voir la Documentation officielle
Remarque: Pour les versions @angular/cli
antérieures à 6.0.0-beta.6
, utilisez ng set
à la place de ng config
.
Dans un projet angular-cli existant qui a été configuré avec les styles css
par défaut, vous devez effectuer certaines tâches:
scss
Changer manuellement en .angular-cli.json (angulaire 5.x et plus ancien) ou angular.json (angulaire 6+) ou en cours d'exécution:
ng config defaults.styleExt=scss
Renommez vos fichiers .css
existants en .scss
(c'est-à-dire styles.css et app/app.component.css).
Pointez la CLI pour trouver styles.scss
Changer manuellement les extensions de fichier dans
apps[0].styles
dans angular.json
Modifiez la
styleUrls
dans vos composants pour qu'elle corresponde à vos nouveaux noms de fichier.
Comme @Serginho l'a mentionné, vous pouvez définir l'extension de style lors de l'exécution de la commande ng new
ng new your-project-name --style=scss
Si vous souhaitez définir la valeur par défaut pour tous les projets que vous créez ultérieurement, exécutez la commande suivante:
ng config --global defaults.styleExt=scss
À partir de ng6, cela peut être accompli avec le code suivant ajouté à angular.json
au niveau de la racine:
Changer manuellement dans .angular.json
:
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
Ouvrir angular.json file
1.change de
"schematics": {}
à
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
"src/styles.css"
à
"src/styles.scss"
puis vérifiez et renommez tous les fichiers .css
et mettez à jour les fichiers Component.ts styleUrls à partir de .css to .scss
Pour angulaire 6,
ng config schematics.@schematics/angular:component.styleext scss
note: @ schematics/angular est le schéma par défaut pour l'interface de ligne de commande angulaire
Intégration du préprocesseur CSS pour CLI angulaire: 6.0.3
Lorsque vous générez un nouveau projet, vous pouvez également définir l’extension souhaitée pour les fichiers de style:
ng new sassy-project --style=sass
Ou définissez le style par défaut sur un projet existant:
ng config schematics.@schematics/angular:component.styleext scss
Documentation CLI angulaire pour tous les préprocesseurs CSS principaux
Sous ng6, vous devez utiliser cette commande, selon un post similaire:
ng config schematics.@schematics/angular:component '{ styleext: "scss"}'
Utilisez la commande:
ng config schematics.@schematics/angular:component.styleext scss
Pour les utilisateurs des extensions Nrwl qui rencontrent ce fil: toutes les commandes sont interceptées par Nx (par exemple, ng generate component myCompent
), puis transmises à AngularCLI.
La commande pour faire fonctionner SCSS dans un espace de travail Nx:
ng config schematics.@nrwl/schematics:component.styleext scss
Un changement de force brute peut être appliqué. Cela va changer, mais c'est un processus plus long.
Allez dans le dossier app src/app
Ouvrez ce fichier: app.component.ts
Changez ce code styleUrls: ['./app.component.css']
en styleUrls: ['./app.component.scss']
Sauver et fermer.
Dans le même dossier src/app
Renommez l'extension du fichier app.component.css en (app.component.scss)
Suivez cette modification pour tous les autres composants. (ex. maison, environ, contact, etc ...)
Le fichier angular.json configuration est le suivant. Il est situé à la racine du projet.
Rechercher et remplacer le fichier css le changer en (scss) .
Sauver et fermer.
Enfin, redémarrez votre ng serve -o
.
Si le compilateur se plaint de vous, recommencez les étapes.
Assurez-vous de suivre les étapes décrites dans app/src de près.