如何在NextJS中实现Bootstrap 5的Sass特性？解决编译报错问题

• 必须单独安装Sass。你之前的Sass使用经验不代表当前NextJS项目已包含Sass预处理器依赖，Bootstrap的Sass特性（比如media-breakpoint-up混合宏）需要本地Sass来编译解析，NextJS不会自动为Bootstrap的Sass依赖预装这个包。

• 安装步骤：

  • npm：npm install sass --save-dev
  • yarn：yarn add sass --dev

• 后续配置注意：

  • 确保你的自定义样式文件后缀为.scss/.sass，而非.css
  • 正确导入Bootstrap的Sass源文件，示例：

    // 可先自定义Bootstrap变量
    $primary: #2563eb;
    // 导入完整Bootstrap Sass
    @import "bootstrap/scss/bootstrap";
    

  • 重启NextJS开发服务器后，即可正常使用@include media-breakpoint-up(md) { ... }这类Sass特性

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