What step in the Next.js webpack compiler adds @layer to the CSS, and how can we stop this?
Answered
Kab posted this in #help-forum
KabOP
I'm using Next.js with the App Router. I'm importing a few global CSS packages in my
This is the order I want to import them in (e.g. I want PrimeReact to override Bootstrap's classes). Next.js seems to be respecting this order in the final compiled CSS file.
However, in the final compiled CSS file (tested in dev mode),
Thank you
app/layout.js
file:import "bootstrap/dist/css/bootstrap.min.css";
import "primereact/resources/themes/mdc-light-indigo/theme.css";
import "primeicons/primeicons.css";
import "./primereact-override.css";
import "./globals.css";
This is the order I want to import them in (e.g. I want PrimeReact to override Bootstrap's classes). Next.js seems to be respecting this order in the final compiled CSS file.
However, in the final compiled CSS file (tested in dev mode),
@layer primereact { ... }
is getting added to most of the PrimeReact classes, which is making Bootstrap's classes take priority over them. There is no @layer
in the original primereact/resources/themes/mdc-light-indigo/theme.css
file. 1) Why is this happening? 2) How to stop it and achieve the desired behaviour?Thank you
Answered by Kab
Not an issue with Next.js - PrimeReact added these layers recently. See https://github.com/primefaces/primereact/issues/5124
1 Reply
KabOP
Not an issue with Next.js - PrimeReact added these layers recently. See https://github.com/primefaces/primereact/issues/5124
Answer