How to use CSS pre-processors?

Thanks to Vue Loader, you can use any kind of pre-processor for your <template>, <script> or <style>: simply use the lang attribute.

Example of our pages/index.vue using Pug and Sass:

  1. <template lang="pug">
  2.   h1.red Hello World!
  3. </template>
  5. <style lang="sass">
  6.   .red
  7.     color: red
  8. </style>
  10. <style lang="scss">
  11.   .red {
  12.     color: red;
  13.   }
  14. </style>

To use these pre-processors, we need to install their webpack loaders:

  1. npm install --save-dev pug pug-plain-loader
  1. npm install --save-dev node-sass sass-loader