Running webcompiler on folder with multiple scss files runs into error

[Baklap4]

I have a folder structure like this:

wwwroot
--->css
------> app.scss
------> _Variables.scss

whenever i run the webcompiler i'm getting errors of variables not being replaced with the actual variable: I'm running like this dotnet tool run webcompiler -r wwwroot some of the output:

PM> dotnet tool run webcompiler -r wwwroot
dotnet : Expected expression, found '$'
At line:1 char:1
+ dotnet tool run webcompiler -r wwwroot
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: (Expected expression, found '$':String) [], RemoteException
    + FullyQualifiedErrorId : NativeCommandError

-- in file wwwroot\css\app.css L33:19
Expected expression, found '$'
-- in file wwwroot\css\app.css L34:22

At the location at L33 there's a variable name prefixed with $ while i expected the actual value...

Contents of app.scss are like this:

@import "Variables";

h1, h2, h3, h4, h5, h6 {
    color: $color-base;
    font-family: Ubuntu;
    font-weight: bold;
}

contents of _Variables.scss

$color-base: #00c7b1; // a.k.a. Light Green

compiled app.css:

:root {
  --color-base: $color-base;

how to get it compile correctly?

[stefanloerwald]

Hi @Baklap4,

this does not seem to compile with either dart-sass or libsass. I verified that by pasting

$color-base: #00c7b1; // a.k.a. Light Green
:root {
  --color-base: $color-base;
  }

into https://www.sassmeister.com/

The issue goes away when you remove the -- prefix.

Therefore, this is not an issue of Excubo.WebCompiler itself. If it is correct syntax (which I don't know), it would need to be fixed in the sass compiler. Since libsass is discontinued, we have to wait until https://github.com/Taritsyn/DartSassHost is production ready and that issue is resolved in dart-sass.

BR Stefan

[Baklap4]

I think you jumped to conclusion too early Just tried it out with Sass.js playground for example and it works there out of the box. Since sassmeister doesn't support multiple files sadly i couldn't test it there

$color-base: #00c7b1; // a.k.a. Light Green
:root {
  --color-base: $color-base;
  }

This was the compiled output from the compiler (in app.css)

If i look at Sass.js playground this is the expected output:

:root {
  --color-base: #00c7b1;
}

while this was the actual output:

:root {
  --color-base: $color-base;

The culprit being the $color-base not being replaced with the actual value from _Variables.scss

Added output as picture

[stefanloerwald]

Sorry, I don't think I jumped too early.

The code

$color-base: #00c7b1;

// a.k.a. Light Green
:root {
  color-base: $color-base;
}

compiles to

:root {
  color-base: #00c7b1;
}

on sassmeister.com. So it's not the import of a different file that causes this.

In any case, this really can't be an issue of this tool, because this tool simply invokes a compiler, developed and maintained by other projects. So if there is an issue where something that should compile doesn't compile, you need to raise that issue with them.

sass.js.org uses a different compiler, which treats this code differently. Which compiler is right, I can't say, because I don't know the language enough. I wouldn't count on sass.js, as it uses libsass, which is deprecated (see https://github.com/sass/libsass).

I'm sorry, but there really isn't anything we can do here to solve your issue. Since you're running into an issue with libsass (the currently used compiler in this tool), there is also no way to solve your issue there, because it is already deprecated.