change - install bootstrap angular 4

Cómo usar Bootstrap 4 con SASS en angular

Question

Me gustaría usar Bootstrap 4 con SASS en un proyecto Angular (4+) creado con Angular CLI.

En particular necesito:

• use SASS en lugar de CSS tanto como estilo global como estilo Componente
• compilar fuente Bootstrap SASS junto con mis estilos personalizados * .scss
• asegúrese de que mis estilos personalizados anulen la fuente de Bootstrap, de modo que pueda anular las fuentes de Bootstrap cuando sea necesario, sin editar la fuente de Bootstrap (lo que facilita la actualización de la versión de fuente de Bootstrap)
• agregue watch & auto-recompile cada vez que alguno de mis archivos * .scss cambie (tanto para componentes como para estilo global) al script ng serve

Answer 1

A partir de la versión 6 debe ser

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

Si tienes un tema personalizado para mí funciona

solo agregando la lib en styles.scss

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

Answer 2

Además de la answer @ ShinDarth, es posible que desee buscar una solución más mínima, importando solo los módulos Bootstrap que necesita en lugar de todos.

Entonces reemplazarías:

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

Con:

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

Entonces su main.scss se vería así:

// 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";

Answer 3

Aquí hay una forma alternativa que logré construir con éxito

1 - Instalar bootstrap

npm install bootstrap 

Esto debería agregar el archivo boostrap scss en node_modules. (Paso 2 - 6 es de https://code.visualstudio.com/docs/languages/css )

2 - Instalar node-sass

nmp install -g node-sass

Esto es necesario para transpilar sass a css

3 - Cree una carpeta donde sea adecuado para que pueda mantener scss y los archivos css generados. p.ej

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

4 - Cree un archivo custom.scss con el siguiente contenido:

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

5 - Cree una tarea en VSCode mediante Ctrl + Shift + B> Configurar tareas> Crear archivo task.json desde plantilla> Otros

El archivo task.json bajo .vscode se crea con contenido predeterminado. Reemplace el contenido con

// 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"
    ]
  }]
}

Nota: Modifique los nombres y las rutas de los archivos según sus necesidades.

6 - Ejecute la tarea para generar css: Ctrl + Shift + B> ''Compilación Sass'' o

7 - Siga los pasos del procedimiento de arranque de temas: ( https://getbootstrap.com/docs/4.1/getting-started/theming/ )

Answer 4

En caso de que alguien más se encuentre con el problema de dependencias de Javascript que tuve cuando ejecuté Bootstrap 4 usando angular-cli, también debe informarle al compilador angular-cli que ha instalado las otras dependencias que necesita boostrap 4:

jquery, popper.js y bootstrap.js

Para eso, debe modificar la matriz de scripts en el archivo de configuración .angular-cli.json a algo como esto:

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

Supongo que ha instalado jquery y popper usando npm install --save jquery popper.js para que esos paquetes estén disponibles en la carpeta node_modules.

Answer 5

Para configurar Angular + Bootstrap 4 usando SASS solo necesitamos configurar la CLI Angular e instalar el paquete Bootstrap 4 npm. No es necesario instalar ningún compilador SASS porque ya está incluido.

EDITAR : esta respuesta se ha actualizado para funcionar con una versión más reciente de Angular CLI (probado con la versión 6.1.3). Dejé las instrucciones para la CLI angular anterior en la parte inferior de esta respuesta, sin embargo, le recomiendo que actualice su versión de CLI angular .

INSTRUCCIONES DE USO DEL NUEVO CLI ANGULAR (versión 6 o superior)

1) Configure la CLI angular para usar SASS en lugar de CSS

- En proyectos existentes:

Edite su archivo angular.json y agregue el valor de clave "styleext": "scss" a los projects.PROJECT_NAME.schematics.@schematics/angular:component objeto.

Así es como debería verse:

{
  // ...
  "projects": {
    "PROJECT_NAME": {
      // ....
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
  // ...
}

- Al crear un nuevo proyecto

Simplemente use:

ng new my-project --style=scss

2) Cambie los estilos de componentes existentes de CSS a SASS (si corresponde)

Para lograr esto, solo necesita cambiar el nombre del archivo de estilo de .scss a .scss y cambiar la @Component({ ... }) consecuencia:

styleUrls: [''./my-component.scss'']

De esta manera, el angular-cli observará automáticamente y volverá a compilar estos archivos cada vez que cambien mientras ejecuta comandos como ng serve .

3) Añadir Bootstrap 4

Instale Bootstrap 4 a través de npm:

npm install bootstrap --save

Ahora agregue Bootstrap a la configuración angular-cli.json dentro de la matriz de styles (antes de cualquier otro archivo css / scss personalizado para permitirles anular las reglas de bootstrap:

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

De esta manera, el código fuente de Bootstrap 4 se mantendrá limpio y será muy fácil actualizarlo cada vez que se lance una nueva versión.

4) Agregue sus archivos SASS personalizados (globales)

Cualquier estilo SASS adicional que debería afectar globalmente el proyecto (a diferencia de los estilos de un solo componente) se puede agregar en app/assets/scss y luego hacer referencia a él en la matriz de styles de angular-cli.json .

Mi sugerencia es hacer referencia a un único archivo main.scss que incluirá todos sus estilos SASS personalizados: por ejemplo, un _variables.scss para sus variables personalizadas, un archivo _global.scss para sus reglas globales, etc.

Entonces, en su angular-cli.json , hará referencia a un main.scss archivo main.scss personalizado:

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

que incluye internamente todo su código global * SASS personalizado:

// main.scss 
@import "variables";
@import "global";
// import more custom files...

* Tenga en cuenta que NO DEBE incluir aquí los archivos de estilo *.scss de los Componentes individuales.

5) Incluya el reemplazo de Bootstrap JavaScript y jQuery.

Hay algunos proyectos que le permiten usar Bootstrap sin jQuery .

Dos ejemplos:

• ngx-bootstrap

• ng-bootstrap

La diferencia entre esos dos proyectos se discute aquí: ¿Cuál es la diferencia entre "ng-bootstrap" y "ngx-bootstrap"?

INSTRUCCIONES PARA EL USO DE CLI ANGULAR ANTIGUO

ADVERTENCIA : ya no mantendré esta parte de la respuesta, así que en lugar de continuar leyendo, recomiendo actualizar su versión de CLI angular y seguir las instrucciones anteriores.

1) Configure la CLI angular para usar SASS en lugar de CSS

Correr:

ng set defaults.styleExt scss

esto afectará su archivo de configuración .angular-cli.json ( example ).

Nota: en caso de que comience desde cero, puede crear un nuevo proyecto usando CLI angular usando: ng new my-project --style=scss que es el equivalente a crear un nuevo proyecto normalmente y luego ejecutar el comando mencionado anteriormente.

2) Cambie los estilos de componentes existentes de CSS a SASS (si corresponde)

Para lograr esto, solo necesita cambiar el nombre del archivo de estilo de .scss a .scss y cambiar la @Component({ ... }) consecuencia:

styleUrls: [''./my-component.scss'']

( example )

De esta manera, el angular-cli observará automáticamente y volverá a compilar estos archivos cada vez que cambien mientras ejecuta comandos como ng serve .

3) Añadir Bootstrap 4

Instale Bootstrap 4 a través de npm:

npm install bootstrap --save

Ahora agregue Bootstrap a la configuración .angular-cli.json dentro de la matriz de styles (antes de cualquier otro archivo css / scss personalizado para permitirles anular las reglas de bootstrap:

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

( example )

De esta manera, el código fuente de Bootstrap 4 se mantendrá limpio y será muy fácil actualizarlo cada vez que se lance una nueva versión.

4) Agregue sus archivos SASS personalizados (globales)

Cualquier estilo SASS adicional que debería afectar globalmente el proyecto (a diferencia de los estilos de un solo Componente) se puede agregar en app/assets/scss y luego hacer referencia a él en la matriz de styles de .angular-cli.json .

Mi sugerencia es hacer referencia a un único archivo main.scss que incluirá todos sus estilos SASS personalizados: por ejemplo, un _variables.scss para sus variables personalizadas, un archivo _global.scss para sus reglas globales, etc. ( example ).

Entonces, en su .angular-cli.json , hará referencia a un main.scss archivo main.scss personalizado:

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

que incluye internamente todo su código global * SASS personalizado:

// main.scss 
@import "variables";
@import "global";
// import more custom files...

* Tenga en cuenta que NO DEBE incluir aquí los archivos de estilo *.scss de los Componentes individuales.

5) Incluya el reemplazo de Bootstrap JavaScript y jQuery.

Hay algunos proyectos que le permiten usar Bootstrap sin jQuery .

Dos ejemplos:

• ngx-bootstrap

• ng-bootstrap

La diferencia entre esos dos proyectos se discute aquí: ¿Cuál es la diferencia entre "ng-bootstrap" y "ngx-bootstrap"?