Use Bootstrap in Next.js 12 with SCSS

user_10919368 0
Viewed 1908

After upgrading Next.js to version 12 Bootstrap with SCSS isn't working anymore.

I have a global.scss file which gets imported in the _app.js. In this file I import Bootstrap and Bootstrap Icons.

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

It worked perfectly, but not after upgrading to Next.js 12. Now I get an import error and I don't know how to resolve it.

./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
twitter-bootstrap next.js sass css
2 Answers

This is a temporary workaround.

$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';
user_174055760

I just got this problem myself and using Cosmo workaround, but encountered a problem when using checkbox, the tick icon is missing. to fix this, you can copy the image from bootstrap _variables.scss url("you copy this text") to a new file and save it as svg.

and change Cosmo workaround from none to this new svg path.

_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");

note: you might need to use '../../../' to your path, because it look for the file from bootstrap node_modules folder

user_174341180
Related