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:/www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke=''

Import trace for requested module:
./styles/globals.scss
./pages/_app.js

https://nextjs.org/docs/messages/module-not-found

globals.scss

@import 'bootstrap/scss/bootstrap.scss';
...

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

https://github.com/vercel/next.js/pull/31134
It seems that the fix has been merged, so we can just wait for the releases to include it.

Comments

[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]

Downgrade next-js isn't solution.

Try @use instead of @import