Stop using @import with Sass | @use and @forward explained
Why Stack Overflow recommends it
Stack Overflow users link it when answering 'undefined variable' and migration questions caused by moving from @import to @use, since it explains namespacing and index-file forwarding in one short video.
Recommended by 5 people across 6 different months, 2021 to 2023.
What it is
Kevin Powell shows why Sass's @import is deprecated and walks through its replacements, @use and @forward. He covers namespacing, the key behavioural differences from @import, and using an index file with @forward, and notes that node-sass does not support the module system and dart-sass is needed.
What people said
Recommends Sameer · 2021-05 · Stack Overflow · on “How to get node-sass to not create a .css version of the @imported .scss file that changed, but only the main.css which imports it”
`@use` is a new way of loading styles and it has a lot of benifits Read Here [LINK] , I suggest you if possible start using `@use` since `@import` is deprecated and will be removed completely, Here is a good video on this [this video] to start with.
Recommends bprdev · 2021-12 · Stack Overflow · on “Webpack 5 sass-loader not compiling nested scss files”
I just figured it out. We should be using Sass Modules [LINK] instead of @import . Also, this video helped me a lot: [this video] When I replaced @import with @use it started working.
Recommends Mostafa Mohamed · 2022-08 · Stack Overflow · on “How to avoid duplication of styles in SCSS?”
I suggest you learn the @use technique, it will make things easier for you, and stop using the @import itself, here is a helpful resource [this video]
Recommends Brad · 2023-01 · Stack Overflow · on “@use shows undefined variable constantly”
You have a confusing directory structure. But, I would make an index file, and @forward all the partials in your structure. Your main scss file that gets would "use" the index file and that would get compiled. But it is more involved than that. Watch this video all the way through [this video]
Recommends Brad · 2023-02 · Stack Overflow · on “How to add dynamically "@import" into all my scss files with Angular”
Check out this video. It will explain what I meant by my comment. Watch it all the way through, it will show you how to do what you are trying to do. [this video]
Recommends Kunal Tanwar · 2023-05 · Stack Overflow · on “Undefined variable after upgrade to Vite version 4.3.0”
do `@use '/filepath/tokens' as *` or `@use 'filepath/tokens as tokens*` (you can use any name on the place of tokens) and if you are using the second method than your code will be like this `$color--text: tokens.color-alias-dark-gray`. See this video [this video] to learn more.
Cites Dr Deo · 2021-06 · Stack Overflow · on “SassError: Can't find stylesheet to import. @use '~@angular/material' as mat;”
As usual with Google APIs, there is confusion between Angular Material version 11 and version 12. [Short answer] In SCSS, they seem to have deprecated use of @import favouring @use syntax. It seems Angular Material implemented this change somewhere around v11->12 (am also a newbie. This is my best guess). Watch this YouTube video [this video] to get a general idea of the difference. There is a reason why Google Angular is the most dreaded framework of 2020 on Stack Overflow :) [LINK] So it depends on the Angular Material version you are using [Long answer] In Angular Material v11, they seem to use @import syntax, and in v12 they seem to favour @use syntax. Therefore, you seem to be trying to use
Cites eauxdesoif · 2022-04 · Stack Overflow · on “Multiple classes in each element or SASS inheritance/mixins?”
The first approach is better. It uses relatively less keystrokes. You can use partials to make your SASS organized when using the first approach. More info: [LINK] More info: [LINK] For the second question, you can create a file named '_index.scss' in your, say abstracts, folder. In that file, forward all your partials. Now you can use that file in your components or main stylesheets and avoid a bunch of extra lines. You can also write a custom namespace name for your abstracts and base and utilities et cetera. More info: [this video]