0

I'm working on a Vuejs project and using a framework for the styles. I am setting a variable before importing the framework where I know the variable has !default, but the !default value is still what is compiled when I run it.

// My styles.scss file
$vert-nav-width: 12em;
@import "../node_modules/kent-css/kent.scss";

// kent.scss
...
$vert-nav-width: 8em !default;
...

I have no idea why this is happening, isn't this the exact use case of !default?

When I look at the compiled CSS file (using node-sass and sass-loader with webpack) it just adds the styles with changed attributes

.class-using-variable {
    max-width: 12em
}

To the top of the CSS file, but keeps the original definition using the !default value under it so that is what gets used.

Why is that happening?

Jared Jones
  • 228
  • 2
  • 9
  • Not sure if I understand your problem correctly, but let me say that a variable with `!default` flag will default to the previously set value of this variable (if any available). From your code I see that you set a variable *before* importing the framework in which a variable with a default flag is set. So the correct outcome is that your value (not the one from the framework) is used. Is this also your understanding of the flag? – Marvin Sep 18 '17 at 15:21
  • Yes thats the behavior I am expecting but not getting. The width is 8em when I run the code not 12em like I set – Jared Jones Sep 18 '17 at 15:23

0 Answers0