⚠️ You are looking at the english version of the page. Help us translate it here.

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, CoffeeScript and Sass:

<template lang="pug">
  h1.red Hello {{ name }}!

<script lang="coffee">
export default data: ->
  { name: 'World' }

<style lang="sass">
  color: red

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

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

npm install --save-dev pug@2.0.3 pug-plain-loader
npm install --save-dev coffeescript coffee-loader
npm install --save-dev node-sass sass-loader


Jumpa kesalahan atau ingin berkontribusi pada dokumentasi ini? Sunting halaman ini di GitHub!

Platinum Sponsors

Support Us