在AstroJS项目中使用全局SCSS变量的方法

你遇到的问题根源在于：Astro组件的代码块与<style>标签是独立编译的上下文。直接在代码块中导入global.scss只会将样式注入页面，但不会让组件的<style>标签共享其中的SCSS变量。以下是三种可行的解决方法：

方法一：配置Astro自动全局导入SCSS变量 #

通过修改Astro配置文件，让所有SCSS编译时自动导入变量文件，无需每个组件手动引入：

1. 确保已安装sass依赖（若未安装，执行npm install sass）
2. 修改astro.config.mjs：

import { defineConfig } from 'astro/config';

export default defineConfig({
  css: {
    preprocessorOptions: {
      sass: {
        // 自动在每个SCSS文件开头导入全局变量
        additionalData: `@import "./src/styles/global.scss";`,
      },
    },
  },
});

配置完成后，所有使用<style lang="scss">的组件都能直接使用$aquamarine等变量。

方法二：在组件