I have 2 websites that have very similar styling, only difference is color schemes and some other minor things.

To make things organized, using Sass I have 1 master style sheet , 2 style sheets that hold variables such as the different colors for each site, and also 2 "entry point" files which are the base files which get compiled, 2 entry point files because 1 for each site.

the 2 entry points include the 1 master style sheet the site's variable sheet so 5 files in total

I have been using @import and it has been working well. However import is being deprecated. I tried to use @ use and @forward but with no luck When I use USE and FORWARD it gives me "This variable is not defined" error

@import 'variablesheet'
@import 'masterstyles'

This works But use and forward dont

@use 'variablesheet' as *
@use 'masterstyles' as *

How do I do this without import as that is being deprecated?

CodePudding user response：

You can try using each stylesheet with it's own namespace. Then you should be able to use the variables from each scss file. If this doesn't work, then you need to provide more details in your question.

@use 'variablesheet' as v;
@use 'masterstyles' as m;

.class {
  padding: m.$padding; /*m. is to reference masterstyles*/
}

CodePudding user response：

Use Live Sass Compiler by Glenn Marks

Well, the problem is caused by the Visual Studio Code extension you are using for compiling SASS or SCSS files to CSS files.

Don't use this extension: Live Sass Compiler by Ritwick Dey

You are probably using this extension: Live Sass Compiler by Ritwick Dey. It's widely used, but is no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing.

Use this extension: Live Sass Compiler by Glenn Marks

You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to @ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has been built upon it. This extension compiles your SASS or SCSS files to CSS files successfully.