React迁移SCSS到Next.js遇undefined mixins错误，求排查方案

出现undefined mixins错误的核心原因很明确：你在theme.scss里用了Bootstrap的SCSS混合宏，但当前只导入了编译后的Bootstrap CSS文件——CSS是编译完成的产物，不带SCSS的变量、混合宏等源码内容，所以SCSS预处理器根本认不出这些mixins。

下面是具体解决步骤：

1. 安装必要依赖 #

确保你装了Bootstrap完整包和SCSS预处理器依赖，没装的话执行：

npm install bootstrap sass
# 用yarn的话执行：yarn add bootstrap sass

2. 调整theme.scss的导入顺序 #

在theme.scss最开头，先导入Bootstrap的SCSS源文件，这样才能调用它的mixins。可以全量导入，也可以按需导入核心模块：

// 全量导入Bootstrap SCSS
@import "~bootstrap/scss/bootstrap";

// 或者按需导入更轻量，比如只导入核心功能
// @import "~bootstrap/scss/functions";
// @import "~bootstrap/scss/variables";
// @import "~bootstrap/scss/mixins";

// 接下来写你的自定义主题样式
.custom-btn {
  @include btn-variant(#ff4400, #cc3300); // 现在就能正常调用Bootstrap的mixin了
}

3. 清理_app.js的重复导入 #

删掉_app.js里的import 'bootstrap/dist/css/bootstrap.css'，因为你已经通过SCSS导入了Bootstrap源码，编译后会自动包含Bootstrap的所有样式，重复导入会导致样式冲突。调整后_app.js的导入应为：

import '../assets/img/scss/theme.scss';

4. 可选：配置Next.js的SCSS路径 #

如果SCSS导入路径有问题，可在next.config.js里添加配置，让Next.js正确识别node_modules里的Bootstrap：

module.exports = {
  sassOptions: {
    includePaths: ['./node_modules'],
  },
};

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