web-dev-qa-db-fra.com

angular-cli comment ajouter sass et bootstrap?

J'essaie angular-cli et j'essaie de faire preuve de sang-froid dans le projet. J'ai lu dans le wiki que vous pouvez simplement faire:

ng install sass

Faire cela avec la dernière version actuelle (beta.5) me donne une erreur:

Install failed. Could not find addon with name: sass

Comment puis-je installer sur bootstrap et/sass de manière à ce que angular-cli traite la page d’index et systemJS?

angularangular-cli
20
Thibs

NOTE: Cette réponse est obsolète en raison de modifications de la CLI angulaire. Veuillez vous reporter à la réponse ci-dessous de Woot, qui est plus récente.

Vous devez installer node-sass via npm i node-sass --save-dev puis modifier votre styleExt dans angular-cli.json en sass ou scss (ou vous pouvez le définir via ng set defaults.styleExt scss

Quant à bootstrap, placez-le dans le répertoire public (j'utilise un sous-répertoire nommé style) et faites-le référence dans index.html

UPDATE: .__ Si vous souhaitez avoir des fichiers de variables, vous pouvez ajouter le répertoire à angular-cli-build.js comme ceci ...

return new Angular2App(defaults, {
  vendorNpmFiles: [
    ...
  ],
  sassCompiler: {
    includePaths: [
      'src/app/style' <-- directory for SASS reference files
    ]
  }
});
39
Brocco

Si vous créez votre projet avec angular-cli, il est livré avec un préprocesseur scss. Si vous avez des fichiers de styles, vous pouvez simplement changer les extensions ext en scss et ng serve les compilera pour vous.

Lorsque vous créez un projet à l’aide de la cli, vous pouvez lui indiquer que vous souhaitez utiliser scss en 

ng new sassy-project --style=sass

Si vous avez un projet existant Angular 2 to 5 

ng set defaults.styleExt scss

Si votre projet est angulaire 6 et 7

ng config schematics.@schematics/angular:component.styleext sass

Celles-ci indiquent à la CLI que lorsque vous générez de nouveaux composants avec des styles SCSS pas CSS. Il n'ajoute pas de compilateur et n'active pas le compilateur car il en existe déjà un.

Tous les composants existants auraient besoin que leurs extensions de fichier de style soient renommées.

Documentation complémentaire https://angular.io/cli

J'espère que cela t'aides

62
Woot

Modifiez ces lignes de angular-cli.json à partir de

"apps": [
    {
        "styles": [
                "styles.css"
              ]
    }
]

à 

"apps": [
    {
        "styles": [
                "styles.sass"
              ]
    }
]

après avoir défini styleExt

ng set defaults.styleExt scss

Puis changez src/style.css en src/style.sass et ['app.component.css'] en ['app.component.sass']. Cela fonctionnera comme prévu.

6
All Іѕ Vаиітy

Vous pouvez utiliser ce fil pour voir Comment ajouter un bootstrap à un projet angular-cli 

Comment ajouter bootstrap à un projet angular-cli

0
JLS

Après avoir créé avec 

ng create "project"

allez dans le répertoire du projet et essayez avec 

npm install sass

il mettra à jour votre package.json 

0
pd farhad

Merci à Woot pour sa réponse, cette réponse s’adresse davantage aux développeurs .NET Core 2.0/2.1 utilisant le projet de graine angulaire via:

#get lastest SPA templates and make sure angular CLI is global
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::*
npm install -g @angular/cli

#create a new project, default for target framework doesn't seem to be working when .NET Core 2.1 SDK is Installed
dotnet new angular -f netcoreapp2.0 -o test-web-app

Ce projet pilote utilise toujours une version de bootstrap 3 et nécessite donc le téléchargement de bootstrap-sass (ou une mise à niveau vers bootstrap 4, qui inclut le support de scss dans le module de noeud de base):

npm install bootstrap-sass --save-dev

Dans le fichier .angular-cli.json, modifiez la configuration des styles en procédant comme suit:

"styles": [
   "styles.css",
   "../node_modules/bootstrap/dist/css/bootstrap.min.css"
]

à:

"styles": [
   "styles.scss",
   "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss"
]

Et comme l'a souligné Woot, la mise à niveau de la configuration angular cli pour créer des fichiers scss au lieu de fichiers css lorsque la création automatique de fichier doit également être effectuée par:

ng set defaults.styleExt scss

Et vous renommer styles.css fichier en styles.scss est requis.

La CLI angulaire et la version angulaire sont également légèrement obsolètes à la date de rédaction de ce document (1.7.0 et 5.2.0). Cette réponse est donc susceptible de changer une fois celles-ci améliorées. Mais à partir de maintenant cela fonctionne et rien d'autre ne doit être fait pour permettre:

dotnet run

supporter la compilation automatique de scss to css et servir les fichiers sous le capot via ng serve .

0
James Eby