change - install bootstrap angular 4
Cómo usar Bootstrap 4 con SASS en angular (5)
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";
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
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";
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/ )
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.
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:
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:
La diferencia entre esos dos proyectos se discute aquí: ¿Cuál es la diferencia entre "ng-bootstrap" y "ngx-bootstrap"?