首先在assets/styles下新建一個.scss文件。

文件內容

$background-main:#222125;
$background-sub:#2D2E32;
$divider-color: #777777;
$font-color:#ffffff;

在vue.config.js中添加以下代碼

css: {
    loaderOptions: {
      sass: {
      // 全局引入變量和 mixin
        additionalData: '@import "@/assets/styles/theme.scss";'
      }
    },
  },

使用時直接引用變量名稱即可

注意：修改vue.config.js後需要重新啓動一下項目