Usar SASS con Webpack

• 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";`
  }
}