PugとSassを使う

インストール

yarn add -D pug pug-plain-loader

yarn add -D sass node-sass sass-loader

※sassは不要かと思ったら、エラー（Preprocessor dependency "sass" not found. Did you install it?）が発生したので追加

使ってみる

template、styleタグにそれぞれlang属性を指定するだけで利用できる

<template lang="pug">
div#container
  div.header
    p Header
  div.main
    p Body
  div.footer
    p Footer
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
  name: 'Sample',
});
</script>
<style lang="scss" scoped>
#container {
  .header {
    background-color: #ff1493;
    p {
      color: #f5f5f5;
    }
  }
  .main {
    background-color: #ffc0cb;
    color: #4169e1;
  }
  .footer {
    background-color: #ff69b4;
    p {
      color: #fffafa;
    }
  }
}
</style>