Skip to content
Advertisement

Webpack can’t resolve @import of scss/css

I have a main Stylesheet style.scss, which I imported in my main JavaScript file script.js:

JavaScript

This works great, and I could build my website that way in dev mode. Now I wanted to try and use separate Stylesheet and import them in my main stylesheet with the @import rule, like so:

JavaScript

But now I get this error message:

JavaScript

And I don’t understand why it can’t resolve it. I use modules for my JavaScript as well, which works great. But now with SCSS, it does not work at all.

I tried googling for a solution and checked out several open threads, none could help me.
Here are some I checked out on Stackoverflow:

My Node version was 12.18.3, where I had the error first. Now I updated my node to the LTS to 14.15.4, still the same error.

Here are my Webpack config files:

JavaScript

Here are my webpack dependencies:

JavaScript

Advertisement

Answer

This is what I did to fix my problem. Amaresh already mentioned something, about what I might be missing, but that didn’t help me out with my problem, as I was given no real explanation on why that would help.
In the end, I did install sass*, and since node-sass is deprecated, I didn’t pay any mind to it.

The way I used @import was probably wrong. I was trying to do it the native CSS way (MDN), but SCSS might have been overwriting that. @import by SCSS is also deprecated by now and not recommended. When I rechecked the SCSS Website, I went to their guide on how to use SCSS, and they mentioned how I could use @use to import another stylesheet. What I learned was that I need to use Partials. I had to lead filenames with an underscore to create a namespace for that, and import it using the @use rule.

From their example:

JavaScript
JavaScript

* I don’t know if the installation of sass actually helped or not. Since the package is dealing with JavaScript, which I have not done so in my file. But since the package is also mentioned in the sass-loader, I will keep it.

What is important to remember when using @use is how you handle the file in the new file.

JavaScript

By only calling the URL, you have to specify the namespace and then what you want to use from that namespace.

JavaScript

You can call a new namespace and give it a custom name.

JavaScript

Or you can call it and name it with an asterisk, making it available, without having to write the namespace when calling it.

JavaScript

For further reading, please check out their documentation on @use.

User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement