web-dev-qa-db-fra.com

Comment utiliser Bootstrap 4 avec SASS en angulaire

J'aimerais utiliser Bootstrap 4 avec SASS dans un projet Angular (4+) créé avec Angular CLI.

Je dois en particulier:

  • utiliser SASS au lieu de CSS à la fois en tant que style global et style de composant
  • compiler la source Bootstrap SASS avec mes styles * .scss personnalisés
  • assurez-vous que mes styles personnalisés remplacent la source Bootstrap afin que je puisse remplacer les sources Bootstrap si nécessaire, sans modifier la source Bootstrap elle-même (ce qui facilite la mise à niveau de la version source Bootstrap)
  • ajoutez watch & auto-recompile chaque fois que l'un de mes fichiers * .scss change (pour les composants et le style global) dans le script ng serve
angularsassangular-clibootstrap-4
49
Francesco Borzi

En plus de answer de @ ShinDarth, vous pouvez opter pour une solution plus minimale, en important uniquement les modules Bootstrap dont vous avez besoin à la place de tous.

Donc, vous remplaceriez:

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

Avec:

"styles": [
  "assets/scss/main.scss"
],

Alors votre main.scss ressemblerait à ceci:

// import only the Bootstrap modules you need, e.g.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
// import your own custom files, e.g.
@import "variables";
@import "global";
18
Leo

À partir de la version 6 Devrait être

"styles": [
   "node_modules/bootstrap/scss/bootstrap.scss",
   "src/styles.scss",
   "src/assets/scss/main.scss"
]

Si vous avez un thème personnalisé pour moi fonctionne

ajouter seulement la lib dans les styles.scss

@import "./assets/scss/mytheme";
@import "~bootstrap/scss/bootstrap";
5
Whisher

Si quelqu'un rencontre le problème de dépendance Javascript que j'ai rencontré lors de l'exécution de Bootstrap 4 avec angular-cli, vous devez également informer le compilateur angular-cli que vous avez installé les autres dépendances dont boostrap 4 a besoin: 

jquery, popper.js et bootstrap.js

Pour cela, vous devez modifier le tableau de scripts du fichier de configuration .angular-cli.json: 

"scripts": [
    "../node_modules/jquery/dist/jquery.slim.js", 
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"]

Je suppose que vous avez installé jquery et popper en utilisant npm install --save jquery popper.js afin que ces packages soient disponibles dans le dossier node_modules. 

0
vhbazan

Voici une alternative que j'ai réussi à construire avec succès

1 - Installer le bootstrap 

npm install bootstrap

Cela devrait ajouter le fichier boostss scss sous node_modules . (Les étapes 2 à 6 proviennent de https://code.visualstudio.com/docs/languages/css )

2 - Installez node-sass

nmp install -g node-sass

C'est besoin de transpiler sass en css

3 - Créez un dossier approprié pour conserver les fichiers scss et css générés. par exemple.

your-project/
├── scss
│   └── custom.scss   
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

4 - Créez un fichier custom.scss avec le contenu suivant:

@import "../node_modules/bootstrap/scss/bootstrap";

5 - Créer une tâche en VSCode avec Ctrl + Maj + B> Configurer les tâches> Créer un fichier tasks.json à partir d'un modèle> Autres

le fichier tasks.json sous .vscode est créé avec le contenu par défaut . Remplacez le contenu par

// Sass configuration
{
  // See https://go.Microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [{
    "label": "Sass Compile",
    "type": "Shell",
    "command": "node-sass scss/custom.scss scss/custom-bootstrap.css",
    "group": "build",
    "problemMatcher": [
      "$eslint-stylish"
    ]
  }]
}

Remarque: Modifiez les noms de fichiers et les chemins en fonction de vos besoins.

6 - Exécutez la tâche pour générer le css: Ctrl + Maj + B> 'Compiler Sass' ou 

7 - Suivez les étapes de la procédure de thématisation de démarrage: ( https://getbootstrap.com/docs/4.1/getting-started/theming/ )

0
Atilla Baspinar