Usar SASS de bootstrap con node.js

Vamos a usar el SASS de Bootstrap con node.js para hacer lo que queramos, con el core de Bootstrap. Podemos personalizar los colores, para que se ajuste a los de nuestra marca o los de nuestro proyecto.

Es muy común que estamos desarrollando un proyecto, e instalamos el javascript de Bootstrap, pero implementar el CSS puede provocar dolores de cabezas o podemos llegar a implementar practicas no adecuadas o no agradables para el proyecto.

El final de este proyecto, será generar un archivo css y uno js que nos sirva para implementar en nuestro index.html

Pues, comencemos.

Inicialización del proyecto.

Es posible que ya tengas tu proyecto ya iniciado y no necesites hacer todos los pasos. Como buen desarrollador que eres, sigue leyendo y sabrás que implementar, es muy fácil.

Creamos nuestro directorio e inicializamos el proyecto con :

npm init

Seguimos las instrucciones y creamos los archivos necesarios para el proyecto, de manera que quede nuestro directorio así:

src/
- js
- - app.js
- sass/
- - _variables.scss
- - style.scss
public/
- index.html
webpack.config.js
package.json

Preparando el comando de script

Abrimos el package.json y aplicamos el comando para compilar el proyecto. deberia quedar así nuestro parametro script

{
// ...
"scripts": {
  // ...
  "build": "webpack"
 }
// ...
}

Instalación de dependencias

Vamos a instalar las dependencias de desarrollo y las comunes que son de producción

Ejecutamos el siguiente comando para instalar las dependencias de desarrollo.

npm install node-sass sass-loader css-loader postcss-loader style-loader webpack webpack-cli extract-text-webpack-plugin@4.0.0-alpha.0 -D

Ejecutamos el siguiente comando para instalar las dependencias que van a producción.

npm install bootstrap jquery popper.js -S

Configuración de webpack

Lo primero que vamos a hacer es abrir nuestro archivo webpack.config.js, importamos las librerías necesarias y exportamos el objeto de configuración, que quede de la siguiente manera:

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack')

module.exports = {
  // config
}

Ahora comencemos a añadir la configuración

Vamos a definir el entry point, estos sera los archivos de entrada de la aplicación.

entry: [
  './src/js/app.js',
  './src/sass/style.scss'
]

Definimos la salida del archivo js

output: {
  path: path.resolve(__dirname, 'public'),
  filename: 'js/app.js'
}

Aplicamos los plugins para el archivo .css y para implementar jquery

plugins: [
  new ExtractTextPlugin("css/app.css"),
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: "popper.js"
  })
]

Definimos las reglas para los archivos, en nuestro caso para archivos .scss y/o .sass

module: {
  rules: [
    {
      test: /(\.scss|\.sass)$/,
      exclude: /(node_modules)/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ["css-loader", "sass-loader"]
      })
    }
  ]
}

Ahora, tenemos que definir en modo en el que estamos desarrollando, si es produccion o de desarrollo..

mode: 'development'

Las opciones disponibles son development y production.

Y con esto, ya tenemos nuestro webpack configurado.

Preparando los entry points

Abrimos nuestro archivo app.js y solo necesitamos importar bootstrap

required('bootstrap')

Abrimos nuestro archivo style.scss e importamos variables e importamos bootstrap de la siguiente manera:

@import './variables.scss';
@import 'node_modules/bootstrap/scss/bootstrap';

Ahora, ¿para que es el archivo de variables?

Pues, bootstrap está esta preparado para leer variables por si no existen, es decir, bootstrap desarrollo su framework contando de que no dañe nuestras variable si se parecen a la de ellos, por lo que si nosotros creamos variables, y se parecen a las de bootstrap, pues, bootstrap las respetará y usara las nuestras.

Entonces, lo que nosotros tenemos que hacer es definir las variables que bootstrap usa para que nos la respete.

¿Cuales son esas variables?

Pues, todas las variables están en el directorio node_modules/bootstrap/scss/_variables.scss

Vas a conseguir variables como $primary, $danger, $warning, entre otras muchas más.

Todas esas variables que quieras modificar, solo las aplicas en tu archivo de variables y les pones el valor que se te antoje, y ya tendrás tu bootstrap personalizado.

Compilando el proyecto

Tan simple como ejecutar el siguiente comando

npm run build --watch

cuando se termine de compilar, tendrá un archivo js/app.js y un archivo css/app.css en su carpeta public.

Ahora en nuestro html, añadimos los archivos y probamos en nuestro navegador

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- css compilado -->
  <link rel="stylesheet" href="css/app.css">
</head>
<body>
  <div class="container">
    <h1>Hello, world!</h1>
  </div>
  <!-- js compilado -->
  <script src="js/app.js"></script>
</body>
</html>

Artículos que podrían gustarte