font - page title angular 4

angular-cli cómo agregar sass y o bootstrap?

Question

Estoy probando angular-cli y tratando de obtener exasperación y arranque en el proyecto. He leído en la wiki que simplemente puedes hacer:

ng install sass

Hacer esto con la última versión actual (beta.5) me da un error:

Install failed. Could not find addon with name: sass

¿Cómo puedo instalar bootstrap o sass de forma que angular-cli se ocupe de la página de índice y systemJS?

Answer 1

NOTA : Esta respuesta está desactualizada debido a cambios en el CLI angular. Consulte la respuesta a continuación de Woot, que es más actual.

npm i node-sass --save-dev instalar node-sass través de npm i node-sass --save-dev luego cambiar su styleExt en angular-cli.json a sass o scss (o puede configurarlo mediante ng set defaults.styleExt scss

En cuanto a bootstrap, colóquelo en el directorio public (uso un subdirectorio denominado style ) y haga referencia a él en index.html

ACTUALIZACIÓN: Además, si desea tener archivos de variables, puede agregar el directorio a angular-cli-build.js como este ...

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

Answer 2

Cambia estas lineas de angular-cli.json desde

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

a

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

después de configurar styleExt

ng set defaults.styleExt scss

Luego cambie src/style.css a src/style.sass y [''app.component.css''] a [''app.component.sass''] . Funcionará como se espera.

Answer 3

Después de crear con

ng create "project"

Ve al directorio del proyecto y prueba con

npm install sass

se actualizará su package.json

Answer 4

Gracias a Woot por su respuesta, esta respuesta es más para los desarrolladores de .NET Core 2.0 / 2.1 que utilizan el proyecto de semilla angular a través de:

#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

Este proyecto semilla aún usa una versión de bootstrap 3, por lo que requiere la descarga de bootstrap-sass (o una actualización a bootstrap 4 que incluye soporte para scss en el módulo de nodo base):

npm install bootstrap-sass --save-dev

En el archivo .angular-cli.json, cambie la configuración de los estilos a partir de esto:

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

a:

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

Y como señaló Woot, la actualización de la configuración de cli angulares para crear archivos scss en lugar de archivos css cuando el archivo de autocreación también debe realizarse mediante:

ng set defaults.styleExt scss

Y es necesario cambiar el nombre de su archivo styles.css a styles.scss .

El CLI angular y la versión angular también están un poco desactualizados en este momento (1.7.0 y 5.2.0), por lo que esta respuesta está sujeta a cambios una vez que se actualicen. Pero a partir de ahora, esto funciona y no se necesita hacer nada más para permitir:

dotnet run

para admitir la compilación automática de scss a css y servir los archivos bajo el capó a través de ng serve .

Answer 5

Puede usar este hilo para ver Cómo agregar bootstrap a un proyecto de angular-cli

Cómo agregar bootstrap a un proyecto angular-cli

Answer 6

Si creas tu proyecto con angular-cli, viene con un preprocesador scss. Si tiene archivos de estilos, simplemente puede cambiar la extensión a scss y ng serve los compilará por usted.

Cuando creas un proyecto usando el cli, puedes decirle que quieres usar scss por

ng new sassy-project --style=sass

Si tienes un proyecto existente Angular 2 a 5

ng set defaults.styleExt scss

Si tu proyecto es angular 6 y 7

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

Estos le dicen al cli que cuando genera nuevos componentes con estilos scss no css. No agrega un compilador ni habilita el compilador porque ya hay uno allí.

Cualquier componente existente necesitaría cambiar el nombre de sus extensiones de archivo de estilo.

Documentación adicional https://angular.io/cli

Espero que esto ayude