Cómo cargar CSS con Webpack

Por Darío Rivera

Publicado el 2020-09-30 en Webpack

En nuestro post de Introducción a Webpack vimos Qué es Webpack, para qué sirve y cómo utilizarlo. Todo esto lo hicimos teniendo como base un simple archivo JS que al procesarlo con webpack nos generaba una versión de desarrollo y otra de producción. Sin embargo, qué pasa cuando queremos cargar archivos CSS ?, el día de hoy veremos cómo hacer esto posible.

Lo primer que debes hacer es instalar las siguiente librerías.

npm i css-loader style-loader --save-dev

Una vez hecho esto debes agregar el patrón que leerá los archivos CSS y utilizar los loaders instalados anteriormente. Para hacer esto debes modificar el archivo webpack.config.js y agregar una regla en module así:

const path = require('path');

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname),
        filename: 'app.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ],
    }
}

Observa que el entry point de webpack es el archivo main.js. Dicho esto, puedes agregar algo como lo siguiente en ese archivo.

import './app.css'

Después de ejecutar el comando webpack deberás obtener una salida como la siguiente:

Hash: d294dddeed23d606eb49
Version: webpack 4.44.2
Time: 788ms
Built at: 09/28/2020 11:06:42 PM
 Asset      Size  Chunks             Chunk Names
app.js  16.8 KiB    main  [emitted]  main
Entrypoint main = app.js
[./app.css] 515 bytes {main} [built]
[./main.js] 121 bytes {main} [built]
[./node_modules/css-loader/dist/cjs.js!./app.css] 309 bytes {main} [built]
    + 2 hidden modules

Lo cual indica que el archivo css ha quedado cargado y listo para ser usado con el output descrito en webpack. Es decir, solo debes preocuparte por agregar el archivo app.js y webpack hará el resto.

Categorías