SCSS中如何重新导出函数与混入，实现跨文件调用？

你遇到的核心问题是**@use的模块私有作用域特性**——和旧的@import会把内容注入全局作用域不同，@use导入的模块仅在当前文件内可见，不会自动传递给导入当前文件的其他模块。所以component.scss里导入的componentFunctions，不会被main.scss继承访问权限。

下面是几种更优的解决方案：

方案1：直接在main.scss中导入componentFunctions模块 #

这是最简单直接的方式，SCSS会自动处理重复导入的模块，不会产生冗余代码。

修改main.scss：

// main.scss
@use 'component' as componentName;
// 直接导入工具模块
@use 'componentFunctions' as componentFn;

// 直接使用混入
@include componentFn.addColorTheme(...);

方案2：在component.scss中导出需要暴露的混入 #

如果希望通过component模块间接访问工具混入，可以在component.scss中把componentFunctions的指定混入导出：

修改component.scss：

// component.scss
@use 'componentFunctions' as componentFunctions;

// 导出需要暴露的混入，供外部访问
@forward 'componentFunctions' show addColorTheme;

/** Adding a default color theme to the component **/
@include componentFunctions.addColorTheme(...);

之后在main.scss中就可以通过componentName命名空间访问该混入：

// main.scss
@use 'component' as componentName;

// 通过component模块的命名空间访问混入
@include componentName.addColorTheme(...);

如果需要导出模块中所有内容，可以用@forward 'componentFunctions'（不加show），但推荐按需导出，避免不必要的暴露。

方案3：将componentFunctions设为共享工具模块（进阶） #

如果这个工具模块是多个组件共用的，可以直接把它作为全局共享模块，在所有需要的地方直接@use导入，保持模块职责单一——工具模块只负责提供通用混入/函数，组件模块专注于组件逻辑。这种方式更符合SCSS模块化的设计理念，避免模块间不必要的依赖传递。

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