Currently, I am tackling a fresh project in Next.js, and I'm encountering difficulties in personalizing the bootstrap sass variables within my project. I came across a reference on how to customize bootstrap at this link: . However, I encountered the following error message:
The selector ":root" is not considered pure (pure selectors must incorporate at least one local class or id)
Upon reading an insightful article on this platform, I discovered that due to specific restrictions, Next.js only allows global CSS in the root App component. Consequently, I decided to import bootstrap into my global.scss file, which is subsequently imported in my _app.tsx file.
Here's an overview of my project directory structure:
pages
⌞ _app.tsx
⌞ index.tsx
styles
⌞ global.scss
In _app.tsx file,
import '../styles/global.scss'
import 'bootstrap/dist/css/bootstrap.min.css';
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
And within global.scss,
@import './variables'
$primary: red;
@import '/node_modules/bootstrap/scss/bootstrap';
Unfortunately, despite these efforts, the primary button color remains unchanged. I experimented with modifying other variables as well, but none of them seemed to yield the desired result. Any insights or tips on how to diagnose whether the variables are appropriately configured would be greatly appreciated. Thank you!
Here are the dependencies:
- next 11.1.0
- react 17.0.2
- react-bootstrap 1.6.1
- bootstrap 5.1.0