Vue3中使用.scss的全局变量

首先在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后需要重新启动一下项目