Next.Js: import CSS/SCSS/SASS/LESS files in Components without modules

Viewed 222

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?

0 Answers
Related