Vue-Cli 3 SCSSグローバル変数の導入

まず、グローバル変数ファイルglobal.scssを作成します.

$theme-color: #efefef;

編集vue.config.js

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        //              
        data: `@import "@/styles/global.scss";`
      }
    }
  }
};

global.scssで定義された変数を任意の場所で使用できるようになりました

<template>
  <div class="box">div>
template>
<script>
export default {
  data() {
    return {};
  }
};
script>
<style lang="scss">
.box {
  background-color: $theme-color;
}
style>

原文を読む
転載先:https://juejin.im/post/5ce5ff37518825333d1b93df