Whenever I try to add a mixin or var from MediaQueries.scss it tells me it doesn't recognize them, they are in the same folder and I double checked vars and mixin names;
tast.scss:
$var: 200px;
@mixin blue {
color: blue;
}
test.scss:
@use 'tast.scss';
.a {
width: $var; // undefined variable
width: tast.$var; // expected expression, was ".var;"
@include blue; // no mixin named blue
@include tast.blue; // expected "}", was ".blue;"
}
*It causes the same errors if I used this:
@use 'tast';
Since the new @use syntax is only supported by Dart Sass, the Watch Sass extension for VS Code doesn't support it (and I don't know if it ever will) since it uses a version of SassJS - and quite an old one at that.
Instead, you should be able to install Sass directly on your machine with npm install -g sass. This will install the Dart flavour of Sass.
Once installed, and available on your PATH, you can then use a script to watch a Sass file or a whole directory and compile as you make changes.
"scripts": {
// watch a single file
"sass:watch": "sass --watch input.scss output.css",
// watch a directory
"sass:watch": "sass --watch src/sass:build/styles"
}