I really don't like the Next.js "module.scss" approach which gives more limitations than optimizations from my point of view.
With the deprecated "@zeit/next-sass" package, you could simply import global SCSS files at the component level like this:
//myComponentStyle.scss
.title {
color: blue;
}
// MyComponent.jsx
import "./myComponentStyle.scss";
export default function MyComponent() {
return <div className="title">This Is My Title</div>
}
And everything was easy to work with (even scoped styling).
I spent hours to find a way to get this approach to work on the last version of Next.js (I tried multiple packages, webpack config, ...) but my knowledge is limited.
Does anyone of you know a way to allow CSS/SCSS/SASS or LESS global imports at the component level pls?