Procesar CSS e imágenes
Introducción
Conceptos esenciales
Uso práctico
- Como recordarás en la anterior lección comenzamos a procesar las dependencias de nuestro proyecto con Webpack. Más concretamente, nuestro código JavaScript de autor.
- Sin embargo, si abrimos la compilación en un navegador verás que los estilos CSS no se están cargando. En el termina figura un error. Si abrimos el código fuente de la página podrás ver que nuestro archivo CSS es inalcanzable. Vamos a usar Webpack para procesarlo.
- De nuevo, la búsqueda es tu amiga. Vamos a dar un primer paso con los loaders
css-loader
para interpretar nuestro código CSS ystyle-loader
para inyectarlo en el DOM a través de JavaScript. - Importante, recuerda que la carga de
loaders
se expresa de derecha a izquierda. - Primero, instalamos los loaders con
npm install --save-dev css-loader style-loader
. - Y ahora los añadimos a nuestra configuración de Webpack, para poner en marcha de nuevo el proceso
build
.
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
]
},
- Recuerda que
css-loader
necesita una sentencia que importe un documento CSS, así que vamos a añadirla en nuestro archivo fuentemain.js
. Además debemos comentar nuestra referencia al documento CSS enindex.html
, igual que hicimos al tratar con JavaScript.
...
import CSS from "../css/main.css";
...
- Verás que nos encontramos un error.
css-loader
se ha encontrado con algo que no sabe cómo manejar: una imagen. Hay que explicarle a Webpack cómo entender ese "idioma". - Ya sea a través de elementos
img
o en documentos CSS, debemos usarurl-loader
(como en una lección anterior ) para añadir las imágenes inline en base-64 ofile-loader
para añadirlas como archivos. - Primero instalamos
file-loader
connpm install file-loader --save-dev
y luego actualizamos la configuración de Webpack.
...
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
use: ["file-loader"]
}
...
- Ahora, el proceso funciona y podemos abrir
/dist
para comprobar como los estilos están cargados. - ¿Qué pasa si queremos un archivo CSS independiente?. Es decir, que JavaScript no inyecte en el DOM nuestros estilos. Podemos usar el MiniCSExtractPlugin.
- Por supuesto debemos instalarlo con
npm install --save-dev mini-css-extract-plugin
, requerirlo en nuestra configuración, instanciar una nueva versión del plugin y hacer uso del mismo junto concss-loader
, eliminando la llamada astyle-loader
que era quien se encargaba de inyectar nuestro CSS en el DOM.
Código inicial
¿Tienes alguna pregunta sobre esta lección de Aprende Webpack desde cero?
Resuelve todas tus dudas sobre Webpack en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.