在 Next.js 12 中使用带有 SCSS 的 Bootstrap

Posted 2023-03-06

【中文标题】在 Next.js 12 中使用带有 SCSS 的 Bootstrap

【英文标题】：Use Bootstrap in Next.js 12 with SCSS

【发布时间】：2021-12-21 17:00:24

【问题描述】：

将 Next.js 升级到版本 12 后，使用 SCSS 的 Bootstrap 不再工作。

我有一个global.scss 文件，它被导入到_app.js 中。在这个文件中，我导入了 Bootstrap 和 Bootstrap 图标。

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

它工作得很好，但升级到 Next.js 12 后就不行了。现在我收到一个导入错误，我不知道如何解决它。

./styles/global.scss:5:0
Module not found: Can't resolve '../node_modules/bootstrap/scss/forms/data:image/svg+xml,<svg xmlns='http:/www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke=''

Import trace for requested module:
./styles/global.scss
./pages/_app.jsx

https://nextjs.org/docs/messages/module-not-found

【问题讨论】：

应该由PR#31134（合并）修复。等待带有该修复的金丝雀版本，然后您可以对其进行测试。

已验证它适用于金丝雀安装。现在急切地等待真正的补丁发布。真的很感谢这个帖子。

【参考方案1】：

这是一个临时解决方法。

$form-check-input-checked-bg-image: none;
$form-check-radio-checked-bg-image: none;
$form-check-input-indeterminate-bg-image: none;
$form-switch-bg-image: none;
$form-switch-focus-bg-image: none;
$form-switch-checked-bg-image: none;
$form-select-indicator: none;
$form-feedback-icon-valid: none;
$form-feedback-icon-invalid: none;
$navbar-light-toggler-icon-bg: none;
$navbar-dark-toggler-icon-bg: none;
$accordion-button-icon: none;
$accordion-button-active-icon: none;
$carousel-control-prev-icon-bg: none;
$carousel-control-next-icon-bg: none;
$btn-close-bg: none;

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

【讨论】：

为什么您认为这是一种临时解决方法？这种方法有哪些限制或权衡使其不适合作为长期解决方案？

这是一个临时解决方法，因为此错误最终将由 31134 修复。将这些变量更改为 none; 可以修复错误，但不能修复错误本身。

【参考方案2】：

我自己也遇到了这个问题并使用 Cosmo 解决方法，但在使用复选框时遇到问题，勾选图标丢失。要解决此问题，您可以将图像从 bootstrap _variables.scss url("you copy this text") 复制到一个新文件并将其保存为 svg。

并将 Cosmo 解决方法从无更改为这个新的 svg 路径。

_variables.scss

$form-check-input-checked-bg-image:       url("copy this text here") !default;

new_svg.svg

paste the text here and save

global.scss

$form-check-input-checked-bg-image: url("path/to/new/new_svg.svg");

注意：您可能需要在路径中使用“../../../”，因为它会从 bootstrap node_modules 文件夹中查找文件