Want to take a look at our new docs? Our new docs are now in beta. Have fun!

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:

<template lang="pug">
  h1.red Hello World!
</template>

<style lang="sass">
  .red
    color: red
</style>

<style lang="scss">
  .red {
    color: red;
  }
</style>

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

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

Contributors

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us