在Next.js 12中搭配SCSS使用Bootstrap出现导入报错如何解决

Next.js 12 默认启用 Webpack 5 作为打包工具，同时对 SCSS 导入规则做了调整，不再支持原先的 ~ 前缀作为 node_modules 目录别名，同时 Bootstrap 内置的内联 SVG 数据 URI 会被错误识别为本地文件路径，导致解析报错。

按以下步骤依次操作即可修复：

• 第一步：修改 global.scss 中的导入语句，移除路径前的 ~ 前缀：

@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-icons/font/bootstrap-icons.css';

• 第二步：在项目根目录的 next.config.js 中添加 SCSS 解析配置，指定 node_modules 路径并禁用 Sass 自身的 URL 解析规则，交给 Webpack 处理：

const path = require('path')

module.exports = {
  // 其他原有配置保持不变
  sassOptions: {
    includePaths: [path.join(__dirname, 'node_modules')],
    url: false
  }
}

• 第三步：替换已弃用的编译依赖，卸载 node-sass 安装官方推荐的 dart-sass：

npm uninstall node-sass
npm install sass --save-dev

• 第四步：清除缓存并重启项目
  删除项目根目录下的 .next 缓存文件夹，重新执行 npm run dev 启动项目即可。

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