vite5 vue3 全局sass变量在scoped时无法应用使用var

Question

vite5 vue3 全局sass变量在scoped时无法应用使用var(--xxx)定义的scss变量

/** 全局SCSS变量 */

:root {
  --menu-background: #304156;
  --menu-text: #1d79e1;
  --menu-hover: #263445;
  --sidebar-logo-background: #2d3748;
}

/** 暗黑主题 */
html.dark {
  --menu-text: #fc0e0e;
  --menu-hover: rgb(0 0 0 / 20%);
  --sidebar-logo-background: rgb(0 0 0 / 20%);

  --menu-background: rgb(35, 57, 224);
}

$menu-background: var(--menu-background); // 菜单背景色
$menu-text: var(--menu-text); // 菜单文字颜色
$menu-hover: var(--menu-hover); // 菜单悬停背景色

$aa: red;

去除其中的scoped就可以正常访问

$menu-text 是var(--menu-text) css定义的，如果使用$aa 可直接访问，不需要去除scoped

在scoped时 显示变量未定义，

scoped 的data-v也对应上了

这是去除scoped的效果也是期望的效果

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
const pathSrc = resolve(__dirname, "src");

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": pathSrc,
    },
  },
  css: {
    // CSS 预处理器
    preprocessorOptions: {
      // 定义全局 SCSS 变量
      scss: {
        javascriptEnabled: true,
        api: "modern-compiler",
        additionalData: `
          @use "@/styles/variables.scss" as *;
        `,
      },
    },
  },
});

vite配置

github在这里，https://github.com/jeffhuien/vite-scss

这是为什么？

Answer 1

感觉是干扰了 CSS 变量的作用域

这样试试

:global {
  :root {
    --primary-color: #333;
  }
}

.my-component {
  color: var(--primary-color);
}