Comment 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, n'importe quel CSS3 standard Les feuilles de style sont des fichiers SCSS valides avec la même sémantique. De plus, SCSS reconnaît la plupart des hacks CSS (certains CSS Astuces) et la syntaxe spécifique au navigateur, telle que l'ancienne syntaxe du filtre IE.

Puisque SCSS est une extension de CSS, tout code qui fonctionne en CSS fonctionnera en SCSS. Autrement dit, pour un Sass Les utilisateurs doivent uniquement comprendre le fonctionnement des extensions Sass pour bien comprendre SCSS. La plupart des extensions, telles que les variables, les références parentes et Les instructions sont toutes les mêmes ; la seule différence est que SCSS nécessite des points-virgules et des accolades au lieu de sauts de ligne et de retraits

Lors de l'ajout de styles aux composants, pour la modularisation des styles, 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 éléments suivants seront introduits des deux manières suivantes :

1. Préciser lors de la création d'un projet

2. Modifier le projet en cours

1. Précisez

lors de la création du projet Exécuter dans le répertoire spécifié : ng new myProject –style=scss

Remarque : la CLI d'Angular est utilisée ici pour créer le projet.

Si vous souhaitez spécifier SASS, remplacez simplement scss par sass.

2. Modifier le projet en cours

Modifiez le fichier angulaire-cli.json. Il y a deux endroits principaux qui doivent être modifiés :

. Définissez la valeur styleExt par défaut 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, le suffixe par défaut est scss

Dans les styles sous les applications, remplacez styles.css par 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 de modifier le suffixe du fichier style.css.

angularcli convertit le projet CSS en projet scss

Méthode 1 :

Lors de l'ajout, la valeur par défaut est scss

ng new My_New_Project --style=scss

Méthode 2 :

1. Modifier .angular-cli.jsonfichier de configuration :

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

2. Ajoutez le fichier _variables.scss

dans le répertoire src 3. La configuration dans le fichier style.scss est la suivante :

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :