如何在Next.js 14项目的任意SCSS文件中正确引入SCSS混合文件？

问题原因 #

SCSS的@use指令作用域仅限于当前文件，你在globals.scss中导入的mixins模块，并不会自动传递到navigation.scss等被导入的子文件中——每个SCSS文件都是独立的模块，必须自行导入依赖才能使用其内容。

解决方案 #

方案1：在目标文件中手动导入mixins #

在每个需要使用混合的SCSS文件（比如navigation.scss）开头，添加针对mixins的@use语句：

// my-project/src/app/styles/navigation.scss
@use './mixins'; // 因与mixins.scss同目录，使用相对路径

header {
  &.navigation-bar {
    @include mixins.for-size(phone-only) {    
      padding: 0 1%;
    }
  }
}

方案2：使用@forward统一模块入口 #

创建src/app/styles/index.scss作为样式模块的统一出口：

// my-project/src/app/styles/index.scss
@forward './mixins';
@forward './global';
@forward './navigation';
@forward './footer';

然后修改globals.scss，改为导入这个统一入口：

// my-project/src/app/globals.scss
@use 'styles/index';

后续需要使用mixins的文件，只需导入这个入口模块即可：

@use 'styles/index' as styles;

@include styles.for-size(desktop-up) {
  // 样式内容
}

方案3：Next.js配置自动注入（推荐） #

修改项目根目录下的next.config.js，通过sassOptions自动在所有SCSS文件顶部注入mixins的导入，无需手动添加：

// my-project/next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    // 自动注入mixins，使用`as *`可省略命名空间直接调用混合
    additionalData: `@use 'src/app/styles/mixins' as *;`,
  },
};

module.exports = nextConfig;

此时navigation.scss中可直接使用混合，无需额外导入：

// my-project/src/app/styles/navigation.scss
header {
  &.navigation-bar {
    @include for-size(phone-only) {    
      padding: 0 1%;
    }
  }
}

注意事项 #

• 配置自动注入时，确保additionalData中的路径与你的项目结构匹配，Next.js会从项目根目录开始解析路径。
• 若不想省略命名空间，可移除as *，使用@use 'src/app/styles/mixins';，调用时仍需添加mixins.前缀。

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