CSS プリプロセッサを使うには?

vue-loader のおかげで、ただ lang 属性を使うだけで <template><script> あるいは <style> などのためのプリプロセッサを使うことができます。

Pug 及び Sass を使った pages/index.vue の例:

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

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

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

これらのプリプロセッサを使うために Webpack のローダーをインストールする必要があります。

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

Platinum Sponsors

StoryblokMoovweb Support Us