将 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
最佳答案
这是一个临时解决方法。
$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';
关于css - 在 Next.js 12 中使用带有 SCSS 的 Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69890513/