DEV Community


Posted on

Next.js 12 SCSS module resolution problem when importing other SCSS files.

Just to note it down in case I forget about this issue (AGAIN).

Next version: 12.0.3

Issue description

When importing the scss source of bootstrap in my own global scss file, there seem to be some path resolution problems in the latest Next.js and I got these errors:

wait  - compiling...
error - ./styles/globals.scss:4:0
Module not found: Can't resolve '../node_modules/bootstrap/scss/forms/data:image/svg+xml,<svg xmlns='http:/' viewBox='0 0 16 16'><path fill='none' stroke=''

Import trace for requested module:
Enter fullscreen mode Exit fullscreen mode


@import 'bootstrap/scss/bootstrap.scss';
Enter fullscreen mode Exit fullscreen mode

Current Solution

Then I found This issue. Exactly the same one.
So I simply down-grade Next.js to ^11, and it works.

Follow up
It seems that the fix has been merged, so we can just wait for the releases to include it.

Top comments (2)

hassannejadi profile image
Mohammad Hassannejadi

Thank you for this article. I faced to this problem too but I don't know how to downgrade my next.js version. I have an existing project and I want to downgrade it to Next.js v.11 but When I run command "npm install next@11" doesn't change my version. Please tell me how to do that. Thank you.

linker03 profile image
linker03 • Edited

Downgrade next-js isn't solution.

Try @use instead of @import