Next.js项目中按需在SCSS模块引入Bootstrap组件样式问题

针对你遇到的组件SCSS模块无法加载Bootstrap modal样式的问题，可按以下步骤解决：

1. 修正Bootstrap SCSS导入路径 #

Next.js的Sass配置已不再推荐使用~前缀，结合你已配置的includePaths，直接使用简化路径导入即可：

@import "../../styles/variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

@import "bootstrap/scss/modal";

2. 修复SCSS模块的作用域冲突 #

SCSS模块会自动为类名添加哈希前缀，但Bootstrap的modal样式依赖全局类名（如.modal、.modal-dialog），哈希化后会导致样式无法匹配DOM元素。需用:global()包裹Bootstrap样式导入，避免作用域修改：

@import "../../styles/variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

:global {
  @import "bootstrap/scss/modal";
}

3. 优化next.config.js的Sass配置 #

使用绝对路径配置includePaths，避免相对路径的不确定性：

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    includePaths: [require('path').join(__dirname, 'node_modules')],
  },
};

module.exports = nextConfig;

4. 确认依赖完整性 #

确保已安装Bootstrap和Sass依赖：

npm install bootstrap sass
# 或使用yarn
yarn add bootstrap sass
# 或pnpm
pnpm add bootstrap sass

额外说明 #

如果不需要SCSS模块的作用域隔离，也可以直接在组件文件中全局导入modal样式（同样能实现按需加载）：

import './global-nav.module.scss';
import 'bootstrap/scss/modal';

// 组件代码...

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