sass-variable-loader can support sass @import

[chasewoo]

After I used sass-variable-loader, I find sass-variable-loader can't parse @import scss file.

[iamstarkov]

can you publish minimum reproducible test case as github repo?

[azcn2503]

I am also having this issue. It is easy to repro:

variables.scss

$myColor: red;

component.scss

@import "./variables.scss";

.component {
  background-color: $myColor;
}

component.js

// Fails to compile with error: Undefined variable: "$myColor"
import styleVars from "!!sass-variable-loader!./component.scss";

// This works, however
import styleVars from "!!sass-variable-loader!./variables.scss";

It seems that when looking in component.scss, it is not importing variables from variables.scss.

[GU5TAF]

That's correct @azcn2503, it doesn't follow imports. You'd have to import variables.scss directly using sass-variable-loader. It should be possible to use a sass ast library that could follow all imports and return all the variables but it is not something I've looked into too deeply.

[jerryjappinen]

After quickly checking this out, I think this also affects the following case:

functions.scss:

@function my-custom-color-function ($color) {
    @return #ff0000;
}

variables.scss:

@import './functions.scss';

$some-var: my-custom-color-function(#fff);

Output:

import variables from "!!sass-variable-loader!./variables.scss";
console.log(variables.someVar);

Expected output would be '#ff0000', but getting 'my-custom-color-function(#fff)' instead.

[danielgefen]

Also experiencing this issue.. any suggested workaround when using the scss file contains an @import statement?

[jerryjappinen]

@danielgefen found that another package (sass-values-loader) works a bit better, although I had to fork that too to get everything working decently: https://www.npmjs.com/package/sass-vars-to-js-loader

[danielgefen]

@Eiskis your fork is working perfectly! Thanks so much. Saved me some time using it.

[bristoljon]

@Eiskis is your forked code available somewhere? I have webpack setup to alias scss imports from ~theme/ to a particular path. Just wondering if I might be able to fork your fork to get this working for my set up?

[jerryjappinen]

@bristoljon yeah it's on GitHub, I added the repository field to package.json.

• NPM: https://www.npmjs.com/package/sass-vars-to-js-loader
• GitHub: https://github.com/Eiskis/sass-values-loader

Have fun :)

[bristoljon]

Thanks @Eiskis forgot to look there!