So, Sass has a new set of rules that come to replace the old '@import' syntax. But, the new '@use' and '@forward' rules isn't just replacing and working exactly has their old ones.
The new rules are here to fix a lot of bugs from conflict between files that may happen sometimes with the variables import.
The new syntax makes that you only import the variables of a file using some modular stylesheet way. And this is:
- Adding the name of the file you are importing in front of each variable you use:
For me and a lot of people who been using Sass, one of the biggest advantages of this CSS preprocessor, is that syntax is almost the same as plain CSS, but with super powers.
The old way of styling your files was that (beside the $ instead @), we could use the same way of import vars between files on CSS. This new way makes that one of the biggest advantages of Sass syntax, as deprecated.
Instead of adding the name of your Sass variables file in front of every single vars in your file, you just need to add 👉🏽 'as *' in the end of your import:
Other devs on Stack Overflow who faced the same problem &/or helped to find solutions. ✌🏼