@import SCSS files not recognized by compiler?

Question

It won't compile it says:

Undefined variable: "$blue-logo-color."

In variables.scss I have:

$blue-logo-color: #3cabf5;

and in site.scss I have:

@import "variables.scss"

.blue-logo-color {
    color: $blue-logo-color;
}

.blue-logo-background-color {
    background-color: $blue-logo-color;
}

How can I make the WebCompiler include global scss/css files for the compiler? It also doesn't seem to recognize global includes from _Hosts.cshtml.

you need a semicolon at the end of the import statement – App Pack Jul 01 '21 at 13:25 — App Pack, Jul 01 '21 at 13:25
You are right, that fixed it. – Napoleon Jul 01 '21 at 13:27 — Napoleon, Jul 01 '21 at 13:27
I should probably add it as an answer – App Pack Jul 01 '21 at 13:28 — App Pack, Jul 01 '21 at 13:28
Why did you tag Less when it's a Sass question? – phuzi Jul 19 '22 at 08:59 — phuzi, Jul 19 '22 at 08:59

score 1 · Accepted Answer · answered Jul 01 '21 at 13:28

1

SCSS import statements require a semicolon

@import "variables.scss";

answered Jul 01 '21 at 13:28

App Pack

How to import an scss file into scoped scss files? The compiler doesn't recognize the global includes and @ import is not allowed in a scoped file like for example: Index.razor.scss can't use @ import. – Napoleon Jul 01 '21 at 13:34
I've got imports in scoped files (*page.razor.scss) with no problems using relative paths eg: @import '../SCSS/Variables.scss'; – App Pack Jul 01 '21 at 13:35
Restarting Visual Studio solved the scoped import. – Napoleon Jul 01 '21 at 13:40

1 Answers1