Vue3でSCSSの変数を呼び出して使う方法

• プロジェクトのルートディレクトリ直下にvue.config.jsを作成

• src/assets 配下にscss ディレクトリを作成、その中に variables.scss ファイルを作成（ファイル名、ディレクトリ名は任意でOK）

• vue.config.js 内に以下を記述　公式ドキュメント

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      scss: {
        additionalData: '@import "@/assets/scss/variables.scss";'
      }
    }
  }
})

• variables.scss に以下をscssで使う変数を記述（以下例）

$pc: 1080px;
$tab: 768px;
$sp: 480px;

$header-height: 56px;
$footer-height: 80px;

$light-gray: #c6c6c7;
$dark-gray: #3c4751;
$primary: #404040;
$secondary: #c85c0f;
$activate: #3b648a;

• どのファイルからでも変数を参照して使うことができる（以下例）

<template>
  <div class="container">
    <header>This is Header</header>
    <main>
      <slot></slot>
    </main>
    <footer>This is Footer</footer>
  </div>
</template>

<style scoped lang="scss">
header {
  height: $header-height;
  width: 100%;
  background: $light-gray;
}