Maison > Article > interface Web > Explication détaillée de la façon de prendre en charge SCSS dans Angular
SCSS est une nouvelle syntaxe introduite par Sass 3. Sa syntaxe est entièrement compatible avec CSS3 et hérite des puissantes fonctions de Sass. Autrement dit, toute feuille de style CSS3 standard est un fichier SCSS valide avec la même sémantique. De plus, SCSS peut également reconnaître la plupart des hacks CSS (certaines astuces CSS) et la syntaxe spécifique au navigateur, telle que l'ancienne syntaxe du filtre IE.
Étant donné que SCSS est une extension de CSS, tout le code qui fonctionne correctement en CSS fonctionnera également correctement en SCSS. En d'autres termes, un utilisateur Sass n'a besoin que de comprendre le fonctionnement des extensions Sass pour comprendre pleinement SCSS. La plupart des extensions telles que les variables, les références parents et les directives sont cohérentes ; la seule différence est que SCSS nécessite l'utilisation de points-virgules et d'accolades au lieu de sauts de ligne et d'indentation
Lors du style des composants, dans un souci de style Pour la modularisation , nous utilisons généralement SCSS et SASS. Alors, comment pouvons-nous faire en sorte que notre projet Angular prenne en charge SCSS ou SASS ? Les deux méthodes suivantes seront introduites :
Spécifier lors de la création d'un projet
Modifier le projet en cours
1. Spécifiez
lors de la création du projet et exécutez-le dans le répertoire spécifié : ng new myProject –style=scss
Remarque : utilisé ici CLI angulaire pour créer des projets.
Si vous souhaitez spécifier SASS, remplacez simplement scss par sass.
2. Modifier le projet actuel
Modifier le fichier angulaire-cli.json Il y a deux endroits principaux qui doivent être modifiés :
Changer la valeur styleExt dans les valeurs par défaut Définir sur scss
"defaults": { "styleExt": "scss", "component": {} }
De cette façon, lorsque nous exécutons des commandes telles que ng g composant myComponent pour générer des fichiers, la valeur par défaut le suffixe est scss
Modifiez styles.css dans les styles sous les applications en styles.scss
"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.scss" ], "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ],
Remarque : n'oubliez pas pour modifier le suffixe du fichier style.css.
angularcli Convertir le projet CSS en projet scss
Méthode 1 :
Lors de l'ajout d'un nouveau The la valeur par défaut est scss
ng new My_New_Project --style=scss
Méthode 2 :
1. Modifier la configuration .angular-cli.json. Fichier :
"defaults": { "styleExt": "scss", } "styles": [ "styles.scss" ],
2. Ajoutez le fichier _variables.scss dans le répertoire src
3. la configuration dans le fichier est la suivante :
@import 'variables'; @import '../node_modules/bootstrap/scss/bootstrap';
Recommandations associées :
CSS et Sass (SCSS) spécifications de développement
Mise en œuvre de l'effet de couche de masque de page mobile SCSS et solutions aux problèmes courants
Principes à suivre lors de l'écriture du code SCSS_html/css_WEB -ITnez
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!