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 :

1. Spécifier lors de la création d'un projet

2. 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!