如何在React组件内联样式中访问SASS/SCSS变量

直接在JSX里写$green-d1是无效的，JS无法识别SCSS变量，你需要先把SCSS变量导出为JS可读取的格式，具体步骤如下：

1. 在SCSS文件中导出变量
   在你的SCSS样式文件里，用:export块把需要的变量暴露给JS：

   // 定义你的SCSS变量
   $green-d1: #2ecc71;
   
   // 导出为JS可访问的对象
   :export {
     greenD1: $green-d1;
   }
   

2. 在JSX中导入并使用变量
   导入对应的SCSS文件，然后通过导入的对象访问变量：

   // 导入SCSS模块（注意文件路径要正确）
   import styles from './your-styles.module.scss';
   
   const btnStyle = {
     width: '100%',
     backgroundColor: styles.greenD1,
     border: 0,
   };
   

注意事项 #

• 上述方法依赖CSS Modules，确保你的项目构建工具（Webpack、Vite等）已经配置支持CSS Modules
• 如果不想用CSS Modules，也可以通过全局样式导出，但模块化方式能避免样式污染，更推荐
• SCSS的:export块会自动将短横线命名的变量转为驼峰式（比如green-d1导出后在JS里是greenD1），你也可以手动指定驼峰变量名

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