React项目中在Sass文件外部访问变量报错问题求助

问题核心：Sass变量是预编译阶段的产物，编译完成后会被替换成具体值，不会保留在最终的CSS里。直接把Sass文件导入JS，本质上是加载编译后的CSS，自然找不到原有的Sass变量。下面是不用配置Webpack的两种解决方法：

方法一：将Sass变量转为CSS自定义属性（全局变量） #

这种方法可以让变量同时在Sass和JS中使用：

1. 修改color_variables.sass，在:root伪类中定义对应的CSS变量：

$black:#1c1c1c
$accent: #cc33ff
$grey:#bab3bc
$borders: #e1dfe2
$background: #fafafa
$white:#ffffff

// 将Sass变量转为CSS全局变量
:root
  --black: #{$black}
  --accent: #{$accent}
  --grey: #{$grey}
  --borders: #{$borders}
  --background: #{$background}
  --white: #{$white}

2. 在JS中通过getComputedStyle获取这些CSS变量：

// 获取根元素的计算样式
const rootStyles = getComputedStyle(document.documentElement);
// 获取背景色变量值
const bgColor = rootStyles.getPropertyValue('--background').trim();

方法二：统一用JS文件管理变量，同时供Sass和JS使用 #

这种方法更适合需要在JS和Sass中频繁共享变量的场景：

1. 创建colorVariables.js文件，定义变量：

export const colors = {
  black: '#1c1c1c',
  accent: '#cc33ff',
  grey: '#bab3bc',
  borders: '#e1dfe2',
  background: '#fafafa',
  white: '#ffffff'
};

2. 修改color_variables.sass，导入JS变量并转为Sass变量：

// 导入JS模块，as关键字用来命名别名
@import './colorVariables.js' as vars

$black: vars.$colors.black
$accent: vars.$colors.accent
$grey: vars.$colors.grey
$borders: vars.$colors.borders
$background: vars.$colors.background
$white: vars.$colors.white

3. 在JS中直接导入colorVariables.js使用变量：

import { colors } from './colorVariables.js';

console.log(colors.background); // 输出 #fafafa

两种方法都不需要额外配置Webpack，直接就能在现有React项目中生效。

内容的提问来源于stack exchange，提问作者Miangel