Usar SASS con Webpack
Introducción
Conceptos esenciales
Uso práctico
- Actualmente y aunque los avances en las características nativas de CSS son impresionantes, es muy común utilizar algún tipo de pre-procesador CSS en tus proyectos.
- Sin duda, uno de los más comunes es SASS, así que vamos a añadir a nuestro proyecto la capacidad de compilarlo, aunque lo que aprenderás en esta lección sirve para LESS, Stylus o cualquier otro.
- Como indica en la documentación primero tenemos que instalar el compilador de SASS para Node y el loader para que Webpack lo entienda con
npm install -D sass-loader node-sass
. - Ahora debemos ajustar nuestra configuración de Webpack, actualizando la regla que procesa nuestros estilos para que utilice el nuevo loader
sass-loader
.
{
test: /\.scss$/,
use: [
isDevelopment ? "vue-style-loader" : MiniCssExtractPlugin.loader,
"css-loader", "sass-loader"]
},
- Desde este momento podemos hacer uso de SASS en nuestros componentes Vue, sin olvidar añadir el atributo
lang="scss"
. - Si por ejemplo añadimos una variable y hacemos uso de ella, el proceso funciona y
sass-loader
compila el código SASS que es procesado de forma nativa porcss-loader
que a su vez se lo pasavue-style-loader
oMiniCSSExtractPlugin.loader
, dependiendo si estamos en modo desarrollo o no. - Para finalizar, algo que querrás sí o sí es hacer accesible globalmente tus variables y a justes globales CSS (ya sea nativo o SASS, LESS, etc), sin tener que recurrir a importar el archivo o archivos en cada componente.
- Hasta hace poco se tenía que instalar otra dependencia para lograrlo, pero
sass-loader
viene con la opciónprependData
para especificar esos ajustes globales. - Podemos añadir nuestra variable SASS a
/css/global.scss
e importarla en la configuración para hacer uso de ella en cualquier parte de nuestra aplicación.
{
loader: "sass-loader",
options: {
prependData: `@import "./css/global.scss";`
}
}
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.