Configuración de Webpack para CSS y Preprocesadores

Resumen

¿Cómo configurar CSS en tu proyecto con Webpack?

El uso adecuado de CSS y preprocesadores en proyectos web es fundamental para un desarrollo eficiente y estilizado. Aquí te guiaré paso a paso sobre cómo integrar y optimizar CSS en tu proyecto usando Webpack.

¿Cómo instalar las dependencias necesarias?

Para trabajar con CSS en Webpack, primero debemos instalar algunas dependencias esenciales. Las siguientes instrucciones te ayudarán a configurar CSSLoader y MiniCssExtractPlugin:

Abre tu terminal y ejecuta el siguiente comando para instalar las dependencias:
```
npm install mini-css-extract-plugin css-loader -D
```
Estas dependencias nos permitirán procesar y combinar CSS para toda nuestra aplicación.

¿Cómo modificar la estructura del proyecto?

Después de instalar las dependencias, necesitas preparar tu proyecto para trabajar directamente con CSS en tu archivo index.js, eliminando la carga manual del archivo CSS en tu index.html.

Elimina la referencia CSS de tus plantillas HTML.
Abre tu archivo index.js en la carpeta source.
Importa tus estilos directamente desde tu archivo main.css con:
```
import './styles/main.css';
```

¿Cómo configurar Webpack para procesos CSS?

Webpack necesita saber cómo manejar archivos CSS. Por eso debemos modificar el archivo de configuración de Webpack:

Debes requerir el plugin dentro de tu archivo de configuración:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

Configura una nueva regla para CSS en la sección de module.rules:

module: {
    rules: [
        // Otras reglas...
        {
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
    ],
}

Añade el plugin a la sección de plugins:

plugins: [
    new MiniCssExtractPlugin(),
    // Otros plugins...
],

¿Cómo probar la configuración?

Asegúrate de que las configuraciones funcionan adecuadamente. Ejecuta tu proyecto en modo de desarrollo con:

npm run dev

Esto debería compilar tus archivos CSS, generando archivos como main.js y main.css, ubicados en tu carpeta dist.

¿Cómo integrar preprocesadores como Stylus?

Si deseas utilizar un preprocesador como Stylus, puedes añadir otro loader:

Instala las dependencias necesarias:
```
npm install stylus stylus-loader -D
```

Actualiza la configuración de Webpack para reconocer archivos .styl:

{
    test: /\.styl$/i,
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'],
}

Crea un archivo vars.styl y define tus variables con Stylus, usándolo en tu proyecto:
```
$color-black = red
body
  color $color-black
```
Importa tus archivos .styl en tu index.js:
```
import './styles/vars.styl';
```

¿Cómo ejecutar y verificar los resultados?

Una vez que tu configuración esté lista, asegúrate de compilar tu proyecto nuevamente con:

npm run dev

Puedes usar herramientas como Live Server para visualizar los cambios en un entorno local, asegurándote de que los estilos se apliquen correctamente.

Incorporar y manejar CSS en tu proyecto con Webpack da un poder excepcional al desarrollo web, permitiendo flexibilidad y una organización más robusta del código. Experimenta con diferentes configuraciones y continúa ampliando tus conocimientos en preprocesadores para enriquecer tus habilidades de desarrollo. ¡Sigue en el camino del aprendizaje constante!

Emmanuel Rodríguez

student•

Loaders Fuera de contexto, webpack solamente entiende JavaScript y JSON. Los loaders nos permite procesar archivos de otros tipos para convertirnos en módulos válidos que serán consumidos por nuestras aplicaciones y agregadas como dependencias.

En alto nivel, los loaders poseen 2 configuraciones principales:

test - propiedad que identifica cuáles archivos deberán ser transformados
use - propiedad que identifica el loader que será usado para transformar a dichos archivos

Plugins Mientras los loaders transforman ciertos tipos de módulos, los plugins _son utilizados para extender tareas específicas, como la optimización de paquetes, la gestión de activos y la inyección de variables de entorno.

Una vez importado el plugin, podemos desear el personalizarlos a través de opciones.

Emmanuel Rodríguez

student•

Si alguien desea utilizar webpack con tailwindcss, les dejo el repositorio y el tutorial para realizar la configuración con ES6

Rodrigo Rodriguez

student•

Gracias, tu explicación es muy esclarecedora, el Profe es un genio, aunque es como que por ahi va un poquito acelerado y no te da tiempo de asimilar. Igual el profe es Messi.

Armando Chindoy

student•

Para sass

npm i -D node-sass sass-loader

Añadimos el loader al arreglo de loaders y modificamos un poco la expresion regular

{
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"]
      },

Paolo Joaquin Pinto Perez

student•

Gracias!

Rodrigo Rodriguez

student•

Gracias troesma! ( Maestro)

Fernando Quinteros Gutierrez

student•

📘 Loaders para CSS y preprocesadores de CSS

Ideas/conceptos claves

Un preprocesador CSS es un programa que te permite generar CSS a partir de la syntax única del preprocesador. Existen varios preprocesadores CSS de los cuales escoger, sin embargo, la mayoría de preprocesadores CSS añadirán algunas características que no existen en CSS puro, como variable, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.

post procesadores son herramientas que procesan el CSS y lo transforman en una nueva hoja de CSS que le permiten optimizar y automatizar los estilos para los navegadores actuales.

Apuntes

Para dar soporte a CSS en webpack debes instalar los siguientes paquetes

Con npm

npm i mini-css-extract-plugin css-loader -D

Con yarn

yarn add mini-css-extract-plugin css-loader -D

css-loader ⇒ Loader para reconocer CSS
mini-css-extract-plugin ⇒ Extrae el CSS en archivos
Para comenzar debemos agregar las configuraciones de webpack

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	...,
	module: {
    rules: [
      {
        test: /\.(css|styl)$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
        ]
      }
    ]
  },
  plugins: [
		...
    new MiniCssExtractPlugin(),
  ]
}

Si deseamos posteriormente podemos agregar herramientas poderosas de CSS como ser:
- pre procesadores
  - Sass
  - Less
  - Stylus
- post procesadores
  - Post CSS

RESUMEN: Puedes dar soporte a CSS en webpack mediante loaders y plugins, además que puedes dar superpoderes al mismo con las nuevas herramientas conocidas como pre procesadores y post procesadores

Matías Wasiak

student•

Gracias por el aporte!

Alonso Fabricio Samanez Nuñez

student•

Gracias

Cesar Oros Soto

student•

Hola a todos, para los que tienen problema al agregar el archivo .styl En la regla de css deben reemplazar la expresión regular

/\.css$/i

por

/\.css|\.styl$/i

Leonardo Rincon

student•

Cool, man que gran aporte, batalle un poco con eso, ya iba a dejar la pregunta hasta que vi tu comentario!

John Ruiz

student•

@Cesar,

Wow, qué bueno, llevaba dos días buscando el error de los archivos CSS y STYLUS.

Gracias totales.

Rony Porraz Vargas

student•

MiniCssExtractPlugin Este loader lo que nos permite es que en nuestro proyecto de desarrollo poder importar en los archivos JavaScript importar archivos CSS o de otros preprocesadores, al final webpack importara en nuestro HTML todo nuestro css. Instalación NPM

npm i mini-css-extract-plugin css-loader -D

yarn

yarn add mini-css-extract-plugin css-loader -D

instalación stylus

npm i stylus-loader -D

Héctor Iván Sáenz Estrada

student•

Un punto que me gustaría complementar es que webpack ejecuta los loaders de derecha a izquierda (Convirtiendo primero de stylus a CSS y luego ya trabaja y extrae el CSS)

test: /\.css|.styl$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader']

O de abajo hacia arriba (Tambien comenzando por convertir de stylus a CSS y luego extrayendo el CSS) según sea el caso en el que los acomodemos.

test: /\.css|.styl$/i,
use: [
	MiniCssExtractPlugin.loader,
	'css-loader',
	'stylus-loader'
]

. Me parece importante mencionarlo para no cometer errores en el futuro solo por no ordenar nuestros loaders correctamente.

Lucas Aristizábal

student•

también peudes inyectar el css instalando style loader, en vez de minicssestractplugin

Andres Felipe Pinchao Ramirez

student•

MY NOTES FOR CSS AND PREPROCETORS OF CSS :D

Aporte OP

Para sass

npm i -Dnode-sass sass-loader

Añadimos el loader al arreglo de loaders y modificamos un poco la expresion regular

{
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"]
      },

**Loaders**Fuera de contexto, webpack solamente entiende JavaScript y JSON. Los loaders nos permite procesar archivos de otros tipos para convertirnos en módulos válidos que serán consumidos por nuestras aplicaciones y agregadas como dependencias.

En alto nivel, los loaders poseen 2 configuraciones principales:

test - propiedad que identifica cuáles archivos deberán ser transformados
use - propiedad que identifica el loader que será usado para transformar a dichos archivos

**Plugins**Mientras los loaders transforman ciertos tipos de módulos, los plugins _son utilizados para extender tareas específicas, como la optimización de paquetes, la gestión de activos y la inyección de variables de entorno.

Una vez importado el plugin, podemos desear el personalizarlos a través de opciones.

En esta clase vamos a aprender a añadir un loader para pode utilizar nuestro css y también un plugin para poder trabajar con css dividirlo en diferentes partes de nuestra aplicación y unirlo

Es importante eliminar las conexiones de archivos a css o scripts de js porque webpack cuando se compile lo hace

Primero instalamos el loader

npm install mini-css-extract-plugin css-loader -D

Eliminamos la conexion al css que esta en nuestro html porque webpack la generara automáticamente al compilarse
En nuestro codigo en src/index.js importamos nuestros estilos

import Template from './templates/Template.js';
import './styles/main.css';

(async function App() {
  const main = null || document.getElementById('main');
  main.innerHTML = await Template();
})();

Vamos a añadir la configuración a webpack para que pueda identificar los elementos que acabamos de agregar.

Importamos la dependencia

const MiniCssExtracPlugin = requiere('mini-css-extract-plugin');

Agregamos el loader a nuestras reglas

{
      test: /\.css$/i, //expresion regular
      //cual es elemento que vamos a tenr
        //Nosotros podemos usar el use con un objeto o un arreglo segun la configuracion 
          // del plugin
      use:[MiniCssExtracPlugin.loader, 'css-loader'], 

    }

Creamos en los plugins una instancia de nuestro dependencia que importamos

plugins: [
    //hacemos una instancia de lo que definimos en el inicio del archivo
      // le anadimos por parametro un objeto donde vamos a tener las 
        //configuraciones que le vamos anadir a nuestro plugin
    new HtmlWebpackPlugin({

      //inyecta el bundle al template html
      inject: true,
      //la ruta al template html
      template: './public/index.html',
      //nombre final del archivo
      filename: './index.html' 

    }),
    new MiniCssExtracPlugin(),
  ]

Daniel Alberto Méndez Pérez

student•

si les da error al ejecutar stylus ; la sintaxis que me funciono es la siguiente

$font-size = 14px
$colortext = blue

body{
color: $colortext;
font: $font-size sans-serif;
}

Ruben Ariel

student•

me ha funcionado :)

José Alberto Vázquez Martínez

student•

Muchas gracias por tu aporte, al fin me funcionó. 🙌🏻

Rony Porraz Vargas

student•

El webpack config queda asi:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    // mode: 'production', // LE INDICO EL MODO EXPLICITAMENTE
    entry: './src/index.js', // el punto de entrada de mi aplicación
    output: { // Esta es la salida de mi bundle
        path: path.resolve(__dirname, 'dist'),
        // resolve lo que hace es darnos la ruta absoluta de el S.O hasta nuestro archivo
        // para no tener conflictos entre Linux, Windows, etc
        filename: 'main.js', 
        // EL NOMBRE DEL ARCHIVO FINAL,
    },
    resolve: {
        extensions: ['.js'] // LOS ARCHIVOS QUE WEBPACK VA A LEER
    },
    module: {
        // REGLAS PARA TRABAJAR CON WEBPACK
        rules : [
            {
                test: /\.m?js$/, // LEE LOS ARCHIVOS CON EXTENSION .JS,
                exclude: /node_modules/, // IGNORA LOS MODULOS DE LA CARPETA
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css|.styl$/i,
                use: [ MiniCssExtractPlugin.loader, 'css-loader' , 'stylus-loader' ]
            }
        ]
    },
    // SECCION DE PLUGINS
    plugins: [
        new HtmlWebpackPlugin({ // CONFIGURACIÓN DEL PLUGIN
            inject: true, // INYECTA EL BUNDLE AL TEMPLATE HTML
            template: './public/index.html', // LA RUTA AL TEMPLATE HTML
            filename: './index.html' // NOMBRE FINAL DEL ARCHIVO
        }),
        new MiniCssExtractPlugin() // INSTANCIAMOS EL PLUGIN
    ]
}

Miguel Hernández Casiano

student•

Tus posibles dudas resueltas:

1. ¿Cómo sabe webpack que debe agregar el vínculo a la hoja de estilos Css?

Lo hace porque en el index.js lo pusimos como import. Esto hace que se vuelva una dependencia, por lo que la incluirá en el archivo HTML de salida.

2. ¿Cuál es la diferencia entre el loader y el plugin de css?

Webpack solo entiende JavaScript y JSON. El loader permitirá que webpack entienda otros tipos de lenguajes. en este caso CSS.Esto hará que se pueda agregar al gráfico de dependencias. . Pero una cosa es entender CSS y otra cosa poder "exportar CSS". Para exportarlo usamos el plugin mini-css-extract-plugin. .

3. ¿Por qué en la configuración de webpack añadimos la parte de consty require al inicio del archivo?

Porque un plugin es un objeto. En la constante MiniCssExtractPluginestamos guardando el código de la clase a partir de la cuál vamos a instanciar dicho objeto. El código original vive en la dependencia que descargamos. .

4. ¿Para qué son la parte de test y use?

Esta parte es para los loaders. El profesor lo hizo en "desorden" y por eso podría ser confuso cuàndo estamos configurando el loader y cuándo estamos configurando el plugin. . En el caso de las reglas, test y use son para configurar los loaders. En testse le indica qué tipo de archivos deben de ser transformados y en use se le indica qué loader debe usar para transformar el tipo archivos que indicaste en test. En este caso es como decirle: Cada que te encuentres un archivo en formato CSS, utiliza css-loader para transformarlo y agregarlo al gráfico de dependencias. .

5. ¿Por qué le pasamos dos elementos al use para el loader CSS?

La documentación lo recomienda de esa manera. Puedes ver más info aquí: https://webpack.js.org/plugins/mini-css-extract-plugin/ .

6. ¿A qué se refiere new MiniCssExtractPlugin()?

Es la forma de instanciar un objeto del plugin. Recuerda que los plugins son objetos y que podemos instanciar cuantos necesitemos para diferentes funciones. .

7. ¿Por qué el archivo de salida se llama main.css?

Porque el plugin genera un archivo css por cada archivo js que contenga css como dependencia. Al archivo css de salida le coloca el nombre del archivo js de entrada. .

Luis Rafael Viñas Gómez

student•

Alguno ha trabajado con Tailwind y Webpack en un proyecto?

Fernando Quinteros Gutierrez

student•

Hola Luis, actualmente tengo un template que lo uso y mantengo de vez en cuando, puedes revisar las ramas. Puedes hacer Pull Request para hacer más grande este proyecto 😉

devferx/webpack-tailwind-template

Luis Lira

student•

Hola! Te paso un post para que veas cómo configurar Webpack con Tailwind por si tienes dudas :D https://dev.to/alexcamachogz/lleva-el-poder-de-tailwind-a-tus-proyectos-con-webpack-12n3

Oscar Stevens Cuartas Bejarano

student•

la verdad, estoy muy perdido con estos cursos, el profesor es excelente pero no logro hacerme a la idea de que me digan, haz esto y aquello, escribe este comando, instala esta dependencia y ya con eso voy a progresar como programador, copio pego y doy enter a un monton de cosas que no se porque rayos estan alli, no entiendo porque debo usarlas, no entiendo como funcionan por dentro y lo PEOR DE TODO un dia dependendicas que pertenecen a otra persona podrian desaparecer o dejar de actualizarse, alli que hare? si nisiquiera se como funcionan o porque no las estamos aprendiendo a crear sino que debemos usarlas de otro y encima son tan importantes para un proyecto.... estoy perdido, me gustaria que ademas del milagro me dijeran como opera el santo

Jovanny Alarcon C

student•

creo que eso nos pasa a muchos... aqui voy nuevamente repitiendo el curso... iba por la clase 12 y me devolví a empezar de nuevo.. eso si tomando apuntes y leyendo todos los comentarios de las clases y tambien leer la documentación también le eché una mirada al curso de expresiones regulares.. y ya voy entendiendo un poco mas.. toca ir con calma y paciencia , poco a poco uno va entendiendo y le encuetra sentido a todo... tengo la seguridad que así me tome mas de un mes con este curso lo voy a entender y dominar para seguir con mi ruta de aprendizaje.. mucha suerte!!

Jose Alvarado

student•

A muchos nos pasa! si es la primera vez que se usa estas tecnologias paciencia, práctica, ensayo y error de esta forma se van aclarando los conceptos.

Fernando Quinteros Gutierrez

student•

Cabe recalcar lo que hace webpack hasta este punto es como un hilo 🧵 tiene un inicio, va jalando el hilo poco a poco y va encontrando cosas como el código JavaScript, dentro del detecta en este caso el CSS. Entonces al finalizar de jalar el hilo dejara todo en la carpeta de output.

Oscar Román

student•

A la fecha 29/04/2021 live server presenta inconvenientes con la ultima actualización de win 10 y wsl, recomiendo usar Live Server Preview

Daniel Goñas

student•

no me tiraba ningún error hasta que agregue stylus a web pack. Alguien me puede ayudar?

2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.24.2 compiled with 4 errors in 2259 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! js-portfolio@1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the js-portfolio@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Yovanna\AppData\Roaming\npm-cache\_logs\2021-03-03T15_15_53_873Z-debug.log

Mi codigo de webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  resolve: {
    extensions: ['.js']
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css|.styl$/i,
        use: [MiniCssExtractPlugin.loader,
          'css-loader',
          'stylus-loader'
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html'
    }),
    new MiniCssExtractPlugin(),
  ]
}

mi codigo de index.js:

import Template from './templates/Template.js';
import './styles/main.css';
import './styles/vars.styl';

(async function App() {
  const main = null || document.getElementById('main');
  main.innerHTML = await Template();
})();

mi codigo de vars:

$color-black = red

body
    color $color-black

Daniel Goñas

student•

el error :

2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.24.2 compiled with 4 errors in 1427 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! js-portfolio@1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the js-portfolio@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Yovanna\AppData\Roaming\npm-cache\_logs\2021-03-03T15_19_53_612Z-debug.log

Daniel Goñas

student•

YA LO SOLUCIONE: pues tuve que instalar nuevamente stylus pero asi:

npm install stylus stylus-loader -D

y luego ya estara

Fernando Quinteros Gutierrez

student•

📖 Les comparto esta lectura donde es una buena introducción de los conceptos de pre y post procesadores

Pre y Post Procesadores de CSS, lo que hay en medio.

Camilo Pimentel

student•

El profe Oscar tiene un enorme conocimiento en los temas de tecnologias, pero se emociona mucho explicando que para mi (quizas otras personas) procesamos la informacion de forma mas apausada, seria bueno que bajara un poco la velocidad y explicara con mucho mas detalle cada paso. Gracias!

Gersom Hernandez

student•

Concuerdo...

Orangel Brito

student•

Te recomiendo poner la velocidad a 0.85x y repetir la clase las veces que sea necesario!

Daniel Goñas

student•

alguien sabe xq me sale error?

2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.24.2 compiled with 4 errors in 1905 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! js-portfolio@1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the js-portfolio@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Yovanna\AppData\Roaming\npm-cache\_logs\2021-03-03T05_02_40_345Z-debug.log

Enrique Mendez Roger

student•

tengo el mismo error que tu. aun sigo buscando que puede ser.

Sebastian Londoño

student•

npm install stylus -D

Jeferson Velásquez

student•

Edwin Jorge Arroyo

student•

Instalación con Sass

En tu terminal, corres el siguiente comando:

npm install sass-loader sass webpack --save-dev

Posteriormente, te diriges a tu archivo webpack.config.js y añades esto:

{
			test: /\.css|.s[ac]ss$/i,
			use: [
				MiniCSSExtractPlugin.loader,
				'css-loader',
				'sass-loader'
			],
}