Configuración de Webpack para CSS y Preprocesadores

Contenido del curso

Introducción a Webpack

Proyecto inicial

Loaders y Plugins en Webpack

Deploy del proyecto

Herramientas de desarrollo complementarias

Integración básica de React.js

Próximos pasos

28
Configuración y Uso de Webpack con React
00:48 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:58

Configuración de Webpack para CSS y Preprocesadores

Curso de Webpack

Clase 8 de 28

Clase 8 / 28

Recursos

¿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!

Andres Felipe Pinchao Ramirez

Hace 6 años

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

LoadersFuera 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

PluginsMientras 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(),
  ]

Comentarios (118)118 comentarios

Emmanuel Rodríguez

Rodrigo Rodriguez

Armando Chindoy

Paolo Joaquin Pinto Perez

Fernando Quinteros Gutierrez

Matías Wasiak

Hace 5 años

Alonso Fabricio Samanez Nuñez

Cesar Oros Soto

Leonardo Rincon

John Ruiz

Rony Porraz Vargas

Héctor Iván Sáenz Estrada

Lucas Aristizábal

Hace 4 años

Daniel Alberto Méndez Pérez

Ruben Ariel

José Alberto Vázquez Martínez

Miguel Hernández Casiano

Luis Rafael Viñas Gómez

Luis Lira

Oscar Stevens Cuartas Bejarano

Jovanny Alarcon C

Jose Alvarado

Oscar Román

Diego Goñas

Camilo Pimentel

Gersom Hernandez

Orangel Brito

Enrique Mendez Roger

Sebastian Londoño

Jeferson Velásquez

Edwin Jorge Arroyo

Introducción a Webpack

Curso Avanzado de Webpack para Producción Web

Configuración y uso de Webpack para proyectos JavaScript modernos

Proyecto inicial

Configuración y Uso de Webpack en Proyectos JavaScript

Optimización de Proyectos Web con Webpack para Producción

Configuración básica de Webpack para proyectos JavaScript

Loaders y Plugins en Webpack

Integración de Babel y Webpack para compatibilidad JavaScript

Configuración de HTML-webpack-plugin en Webpack

Configuración de Webpack para CSS y Preprocesadores

Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

Importación de Imágenes con Webpack Asset Module

Optimización de Fuentes Locales con Webpack

Optimización de Proyectos con Webpack: Minificación y Hashing

Alias en Webpack: Simplifica la Importación de Módulos

Deploy del proyecto

Variables de Entorno en Webpack para Proyectos Seguros

Configuración de Webpack para Modo Desarrollo

Configuración de Webpack para Producción y Limpieza de Builds

Activar Watch Mode en Webpack para Desarrollo y Producción

Despliegue de Proyectos Web con Netlify y GitHub

Herramientas de desarrollo complementarias

Configuración de Webpack Dev Server para Desarrollo Local

Análisis de Dependencias con WebPath Bundle Analyzer

Uso de Source Maps en Webpack para Depuración de Código

Integración básica de React.js

Configuración de Webpack y React desde Cero para Producción

Configuración de Webpack en Proyecto React con Babel y JSX

Configuración de Webpack para Proyectos HTML y Servidor Local

Configurar CSS y SaaS en React con Webpack

Configuración de Webpack para Producción en React

Despliegue de Aplicaciones React en Netlify

Próximos pasos

Configuración y Uso de Webpack con React

Configuración de Webpack para CSS y Preprocesadores