Implement SCSS in Next.js 12 using Bootstrap

Ever since updating Next.js to version 12, I've been encountering issues with Bootstrap and SCSS integration.

In my project, I have a global.scss file that is imported in the _app.js. Within this file, I include imports for Bootstrap and Bootstrap Icons like so:

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

Previously, everything worked flawlessly. However, post-upgrade to Next.js 12, I started receiving import errors that I'm unsure how to resolve.

./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
csstwitter-bootstrapsassnext.js

Answer №1

This is a temporary solution.

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

Answer №2

I recently encountered a similar issue and found a workaround using Cosmo, but ran into trouble with the checkbox as the tick icon was missing. To resolve this, I recommend copying the image from bootstrap _variables.scss (url: "you copy this text") to a new file and saving it as an svg.

Next, update the Cosmo workaround to point to this new svg path instead of 'none'.

_variables.scss

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

new_svg.svg

Paste the copied text here and save

global.scss

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

Note: You may need to add '../../../' to your path to ensure that the file is found within the bootstrap node_modules folder.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhanced Bootstrap 4 button featuring custom design with text and image aligned on the right side, optimized for flexbox layout

I am looking to design a button-like div that features a flag image alongside the abbreviation of a country. Although I have some code in mind, it doesn't follow Bootstrap's guidelines and I am struggling to adapt it accordingly. <div cla ...

htmltwitter-bootstrapbuttonbootstrap-4

Navigational dropdown menu in Bootstrap

I'm a bit rusty with Bootstrap and I'm struggling to make my NavBar dropdown toggle. I've gone through all the documentation and forums available but can't seem to figure it out. Any ideas on what I might be missing? <nav class=" ...

htmlcssbootstrap-4

Specify the width of one element to always be the same as the width of another

One common challenge is maintaining the width of one element equal to another when the page loads (refer to link description here). However, it becomes tricky when the side width changes, such as resizing the browser window. Is there a way to dynamically ...

javascriptjqueryhtmlcsswidth

Contents of the container are not displayed in a single line

What could be causing the first element not to align with the other elements in the container? I'm having trouble figuring out why this is happening. The code snippet seems to work, but when I implement it on the webpage, the alignment issue arises. W ...

css

Two collapsible menus featured in the navigation bar

My navbar is displaying two collapse menus, but when one is active and I open the second one, the collapsed content from the second menu gets added to the end of the first one's content. How can I close the other menu when opening the second one? h ...

htmlcsstwitter-bootstrapbootstrap-4

Include a navigation bar in the footer of my WordPress Theme's footer.php file

Looking for help with adding a custom footer to my WordPress theme. I have successfully uploaded my static website here, and now I am in the process of making it dynamic. I have added my primary menu to WordPress, but I am unsure of how to exactly add a fo ...

phphtmlcsswordpress

Having trouble launching Next.js on a Kubernetes cluster

I recently developed a Next.js application and successfully deployed it to a Kubernetes (AKS) cluster. The Docker file I used closely resembles the sample Next.js Docker files available here. The pod manifest is fairly standard, with environment variables ...

node.jsdockerkubernetesnext.js

A guide on capturing and tracking every route in NextJS

As a beginner with NextJS, my current app is basic and only serves a few pages. It displays a 404 page if the route doesn't exist. I want to enable logging for all requests, including those resulting in a 404 error. The app is running in a docker con ...

node.jsloggingnext.js

Executing Javascript code from a specified web address

Let's say I have an image that needs to be shifted vertically, and I achieve it using the following code snippet: document.getElementById('ImgID1').style.verticalAlign = However, the value by which I need to shift the image is provided thr ...

javascriptcssjsondomvertical-alignment

Sentry is causing issues with the build of my Next.js application

After integrating Sentry into my Next.js project, I have encountered an error that is preventing the application from building. The same error also occurs at runtime, but what confuses me is why it's affecting the build process. Is there a way to conf ...

next.jssentry

Cross-Origin Resource Sharing (CORS) issue: The Same Origin Policy prevents accessing the external content from http://api.com. (Cause: Failed CORS request). Error code: (null)

An error occurred due to the Cross-Origin Request being Blocked by the Same Origin Policy. The remote resource at http://bayut-api-v1:4000/properties/list?purpose=for-sale&locationExternalIDs=5002&sort=city-level-score&location=dubai&page=1 ...

dockerexpressnext.jscors

Switch off any other currently open divs

I'm currently exploring a way to automatically close other div's when I expand one. Check out my code snippet below: $( document ).ready(function() { $( ".faq-question" ).click(function() { $(this).toggleClass('open'); $(this ...

javascriptjqueryhtmlcss

What is the best way to customize a button component's className when importing it into another component?

Looking to customize a button based on the specific page it's imported on? Let's dive into my button component code: import React from "react"; import "./Button.css"; export interface Props { // List of props here } // Button component def ...

javascriptcssreactjstypescript

What is causing the z-index to not function properly on my elements?

In my current code setup, I have positioned the hero image at the bottom with an overlay on top that contains text and a button. Additionally, there is a navigation bar with a z-index applied. However, I am facing an issue where the button for viewing my r ...

htmlcssz-index

In JavaScript, alert a message once all images have been clicked

I'm encountering a small issue with my javascript code. I am developing a game for a school project where the objective is to click (remove) fish using a fishing rod. However, the game does not have an end condition set up, so players cannot win. Belo ...

javascriptjqueryhtmlcss

Looking for a solution to align the header properly in your React app?

Struggling with aligning a header? The CSS property of the header is inherited from the app's CSS file. For example, in the image below, "Our Mission" is the header that needs to be left-aligned. Looking for some assistance here. You can find the app. ...

cssreactjs

I'm having trouble getting my login page centered when using Semantic UI

Currently, I am working on creating a login page using Semantic UI. However, I am facing an issue where the column is not aligning to the center as intended; instead, it is occupying the entire page. I have attempted to link all the necessary files in the ...

htmlcsssemantic-ui

When using the NextJS 13 app router, data does not refresh upon updates when using router.push

My NextJS 13 application uses the app router to display a table (shadcn UI) data-table with server-side pagination. There is a create button that redirects to a create page where a new entry can be added to the table. Upon successful API response, the code ...

next.jsserver-side-renderingnext.js13app-router

How to align a div in the center of a cell with Bootstrap

I am currently working with Bootstrap 3 and I have a specific requirement to center a div within a cell in the container row. Most resources I found only mention how to center a div within the entire container, which is not what I am looking for. My goal i ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

First-character styling not applying to ID in CSS

My CSS :first-letter selector is effective on all p elements, however when applied to a span with the id #fletter, it doesn't seem to work... #fletter span:first-letter { font-weight: 600; font-size: 25px; } <span id="fletter"> The : ...

htmlcsscss-selectorspseudo-element