Discussion :

[Gluups]

Bonjour tout le monde,

J'ai répété un même projet pour mieux mémoriser ce qu'il y a dedans, je commence un peu à essayer de moins répéter bêtement, et plutôt essayer de comprendre ce qui se passe.

Le projet utilise bootstrap, donc je tape

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

npm install bootstrap --save

et juste après je suis supposé aller rectifier la feuille de style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

@import '../node_modules/bootstrap/dist/css/bootstrap.css';

Cette fois je me suis rendu compte que l'arborescence bootstrap est déjà présente dans le projet, donc j'ai essayé sans retaper npm install bootstrap.

Eh bien j'ai une erreur, fichier bootstrap.css non trouvé. En fait, il est là, mais il manque un fichier d'index quelque part, ce qui fait que l'import de la feuille de style ne se fait pas.

Je tape le npm install bootstrap comme ci-dessus, et là ça fonctionne.

Je suis allé jeter un coup d'œil à la doc
https://docs.npmjs.com/cli/install

Là-dedans il y a plein de choses intéressantes, mais ... Je n'ai pas vraiment compris.
L'option --save laisse entendre, intuitivement, que l'installation sera retrouvée pour un futur développement. Mais, ça ne dispense pas de refaire l'installation. Donc, c'est ... demi-bénéf., pas vrai ?

Ou alors il y a quelque chose que j'ai fait de travers ?

Après je vais essayer d'approfondir les notions de dépendances, dépendances de développement, et il y en a encore quelques-unes.

Est-ce que quelqu'un comprend mon erreur, ou si il n'y a pas d'erreur, quelque chose qui serait bon à savoir pour que tout ça retrouve un peu de cohérence ?

Voilà le package.json :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{
  "name": "weather-client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.6",
    "@angular/common": "~10.0.6",
    "@angular/compiler": "~10.0.6",
    "@angular/core": "^10.0.8",
    "@angular/forms": "~10.0.6",
    "@angular/platform-browser": "~10.0.6",
    "@angular/platform-browser-dynamic": "~10.0.6",
    "@angular/router": "~10.0.6",
    "bootstrap": "^4.5.2",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.5",
    "@angular/cli": "~10.0.5",
    "@angular/compiler-cli": "~10.0.6",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

[dukoid]

** houlà !

il ne faut jamais modifier les fichiers qui se trouvent dans: node_module

si tu as un truc à modifier, il faut faire de la surcharge:
le bon endroit pour ça serait le fichier: styles.css

pour comprendre, il y a un ordre de lecture des fichiers css, si des noms de classes identiques sont trouvés, c'est dans le dernier fichier lu ou il y a le nom identique qui sera pris en compte
pour ça, bootstrap.css sera lu dans les premiers et styles.css dans les derniers

par exemple , je veux modifier la couleur de fond de bg-primary en rose (et alors ? oui j'aime le rose )

styles.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.btn-primary {
  background: pink;
}

**
--save c'est pour indiquer d'ajouter la ligne de dependance dans le fichier: package.json du dossier ou il se trouve

** -g c'est en global, qui n'a rien à voir avec le dossier du projet Angular
(c'est le dossier node_module quand tu as installé nodeJS et qui l'a foutu je ne sais ou ....)

[Gluups]

En effet, c'est bien ce que j'ai fait, mais après. J'ai créé un style btn1, pour ne pas avoir d'interférences avec le style btn de bootstrap.

Car la question, si je l'ai bien posée, est d'importer la feuille de style de Bootstrap, à l'aide d'une clause d'import dans styles.css.

Il se trouve que cette clause déclenche une erreur, et que la commande

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

npm install bootstrap --save

résout l'erreur.

Et c'est ça qui m'intrigue. Si j'ai déjà l'arborescence bootstrap sous node_modules, c'est que bootstrap est déjà installé, non ?
Or, il faut confirmer l'installation pour que ça marche.

[Gluups]

** houlà !
**
--save c'est pour indiquer d'ajouter la ligne de dependance dans le fichier: package.json du dossier ou il se trouve

** -g c'est en global, qui n'a rien à voir avec le dossier du projet Angular
(c'est le dossier node_module quand tu as installé nodeJS et qui l'a foutu je ne sais ou ....)

Ah oui, on dirait que c'est plus ça, la réponse à ma question.
Je crois que je commence à avoir une approche intuitive de la notion de dépendance, mais qu'il va falloir que je creuse un peu ça.

Apparemment, j'ai dû installer quelque chose avec l'option -g, ce qui fait que je retrouve un répertoire bootstrap dans le node_modules du prochain projet Angular. Mais on dirait que ce n'était pas ce que je croyais.

Dans le projet, à la fin, il y a bootstrap, et @angular-bootstrap

Ah, ce serait @angular-bootstrap, que j'aurais installé en global ?
Et du coup ça aurait installé le répertoire bootstrap, mais pas l'index pour importer la feuille de style ?