• 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 por css-loader que a su vez se lo pasa vue-style-loader o MiniCSSExtractPlugin.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ón prependData 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";`
  }
}
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Webpack en Escuela Vue

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

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬