How to customize the default color palette in Bootstrap 5 for a Next.js project using Sass?

After successfully loading and implementing Bootstrap in my next.js app, I have been struggling for several days to customize the default color scheme.

In my global.scss file:

@import "../node_modules/bootstrap/scss/bootstrap";

$primary:#f3ced6;

I have confirmed that my scss file is linked to the main app.js file because all styles are being applied correctly, including the new sass variables. However, I am unable to get sass to override the default colors. Any assistance would be greatly appreciated!

Answer №1

There are a few things to consider:

It's possible that you have not yet installed sass. If that's the case, you can do the following:

npm install sass

Make this adjustment

@import "../node_modules/bootstrap/scss/bootstrap";

$primary:#f3ced6;

to

// Custom variables
$primary:#f3ced6;

@import "../node_modules/bootstrap/scss/bootstrap";

Instead of adding variables after importing Bootstrap, include them at the top. I usually create a separate file for this purpose and write:

// Custom variables
@import "../scss/variables";

// Bootstrap core
@import "node_modules/bootstrap/scss/bootstrap";

Also, create a file named _variables.scss to house your Bootstrap variables as usual.

To customize the colors, you can override the theme colors like so:

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

You have the option to change "primary": $primary, to "primary": #f3ced6, or you can utilize $primary:#f3ced6; (ensure this is at the top).

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

Combining properties from one array with another in typescript: A step-by-step guide

My goal is to iterate through an array and add specific properties to another array. Here is the initial array: const data = [ { "id":"001", "name":"John Doe", "city":"New York&quo ...

Retrieve a prepared response from a TypeORM query

I need to retrieve all the courses assigned to a user with a simple query: There are 2 Tables: students & courses return await this.studentsRepository .createQueryBuilder('s') .leftJoinAndSelect('courses', 'c' ...

Securely submit user information using NextJs with Supabase's authentication feature

I've been attempting to post an article by inserting the user.id into the "posts table (id column)" but I'm having trouble getting it to work! Here is my current code snippet. "use client"; import { useState } from "react"; i ...

Update the page in React (Next.js) by utilizing the useEffect hook

I am currently in the process of developing a next js application that requires user authentication. I have set up a function call from the page.js file to the firebase/firebaseAuth.js file, where the authorization takes place before sending the data back ...

Storing information upon refresh in Angular 8

When it comes to inter-component communication in my Angular project, I am utilizing BehaviourSubject from RXJS. Currently, I have a setup with 3 components: Inquiry Form Where users enter an ID number to check for summon-related information. This data ...

When working with NextJs, you may encounter a ValidationError indicating that the configuration object is invalid. This error occurs when Webpack has been initialized with a configuration object that doesn't

After upgrading from Next v12 to v12.2.3, I encountered a problem when running "yarn dev" with a new middleware.js file in the root directory: ValidationError: Invalid configuration object. Webpack initialization error due to mismatched API schema. - Deta ...

The deployment of a NEXTJS project with Serverless to AWS encounters issues when trying to locate dependencies that were installed using pnpm

Upon completing the installation of dependencies using pnpm i and successfully deploying via sls deploy, my endpoints are encountering internal errors. This is due to missing tree dependencies that are not being installed along with the explicitly installe ...

What is the best way to handle routing netlify requests at the edge for cached resources that have varying privilege requirements?

I am currently working on a NextJS application hosted on Netlify that retrieves data from a headless CMS. Within this CMS, articles can be categorized into different types: Available for free Require login to access Need a paid subscription to view If a ...

Ways to incorporate conditional checks prior to running class methods

Seeking input on handling async data retrieval elegantly. When initializing a class with asynchronous data, I have been following this approach: class SomeClass { // Disabling strictPropertyInitialization private someProperty: SomeType public asy ...

Utilizing vue-property-decorator: Customizing the attributes of @Emit

After seeing the @Emit feature, I checked out the example on GitHub. import { Vue, Component, Emit } from 'vue-property-decorator' @Component export default class YourComponent extends Vue { count = 0 @Emit() addToCount(n ...

What is the best way to pass props to a styled component (e.g., Button) in Material-UI

One of my tasks involves creating a customized button by utilizing the Button component with styled components. export const CustomButton = styled(Button)({ borderRadius: "17px", fontWeight: 300, fontSize: ".8125rem", height: &q ...

Navigation shadow in Bootstrap not showing up on nav.shadow

I've created a navigation bar component using vue.js and am styling it with bootstrap by including the framework in the main HTML file. Although I've added the desired styling to the navbar component, I'm facing an issue where adding the sh ...

Intellisense fails to function properly after attempting to import a custom npm package

I've encountered an issue with a custom npm package that I created using storybook. The components function properly in other projects when imported, but the intellisense feature is not working as expected. Interestingly, when I import the same compon ...

Implementing a props interface for conditions in styled components within a React application using Typescript

This specific component is created using React along with the "styled components" library to manage user input. In the case of invalid user input, the corresponding styles should be displayed as shown below (class invalid). Although this example functions ...

I keep encountering an error that says "ReferenceError: localStorage is not defined" even though I have already included the "use

I have a unique app/components/organisms/Cookies.tsx modal window component that I integrate into my app/page.tsx. Despite including the 'use client' directive at the beginning of the component, I consistently encounter this error: ReferenceErr ...

What is the proper way to declare a Type for a JSX attribute in Google AMP that utilizes square brackets?

When utilizing AMP's binding feature, you must apply specific attributes that encapsulate an element's property with square brackets and connect it to an expression. An example from AMP is shown below: <p [text]="'Hello ' + foo"> ...

What is the syntax for declaring a variable as a string or a function with parameters?

Is it possible to define a variable in TypeScript like a string or as a Function, but with specific parameters? I am aware of how to define a string actionGetData: string; and a function actionLoaded?(event: any, ui: any): void;, but when I try to define ...

Dynamic getter/setter in Typescript allows for the creation of functions

I'm facing a challenge in making Typescript automatically infer types for dynamically created getter and setter functions. In my code, I have a class called MyClass which contains a map of containers: type Container = { get: () => Content s ...

What strategies can I implement to keep my Nextjs App logged in?

What steps can I take to keep regular users from needing to log in every time they visit the website in a NextJs (ReactJs) environment? ...

Leveraging property information for a dropdown field

In my index.tsx file, I am fetching data that I pass to the component FormOne. This allows me to access the data in FormOne using props.data const [data, setData] = useState([]); ... return ( ... <FormOne data={data} /> ); I am looking to ...