SCSS @use多文件配置一致性咨询：求统一配置共享方案

核心方案 #

不要让组件直接@use 'uswds-core'，统一通过你的uswds.scss（已转发配置好的uswds-theme）引入USWDS的变量、混合宏等，确保所有组件复用同一份配置。

具体实现步骤 #

1. 保持文件结构

   • uswds-theme.scss：存放USWDS自定义配置（如颜色、字体、间距）
   • uswds.scss：作为USWDS统一入口，负责加载配置并转发核心模块
   • components/：独立存放所有自定义组件文件（如button.scss、card.scss）

2. 调整uswds.scss内容
   先加载自定义配置覆盖默认值，再引入USWDS核心模块，最后转发配置后的资源：

   // uswds.scss
   // 加载自定义配置，覆盖USWDS默认值
   @use './uswds-theme.scss' as *;
   // 引入USWDS核心模块，此时核心模块已应用自定义配置
   @use 'uswds-core' as *;
   // 转发配置后的变量、混合宏，供组件调用
   @forward 'uswds-core';
   @forward './uswds-theme.scss';
   

3. 组件文件的正确引用方式
   所有自定义组件通过uswds.scss引入USWDS资源，避免直接引用uswds-core：

   // components/button.scss
   // 引入统一入口，自动继承uswds-theme的配置
   @use '../uswds.scss' as *;
   
   .custom-button {
     background-color: $color-primary; // 使用配置后的USWDS变量
     padding: $spacing-2 $spacing-4;
     @include u-text-bold; // 使用USWDS混合宏
   }
   

4. 全局样式整合
   在全局样式文件（如style.scss）中统一引入USWDS入口和所有组件：

   // style.scss
   @use './uswds.scss' as *;
   @use './components/button.scss';
   @use './components/card.scss';
   

关键原理 #

SCSS的@use是模块级别的独立引入，直接引用uswds-core的组件会加载未被配置覆盖的默认模块。通过统一入口uswds.scss先注入配置再加载核心模块，转发的就是已应用自定义配置的模块实例，所有组件引用该入口即可复用同一份配置。

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