Not able to over-ride SASS variable values?

[kumaresan-subramani]

Version

3.4.1

Reproduction link

https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue-sass-sample-1080481664.zip

Environment info

 "vue": "^2.6.10",
    "vue-class-component": "^7.1.0",
    "vue-property-decorator": "^8.2.1",
    "vue-router": "^3.0.7"

Steps to reproduce

!. download sample -
vue-sass-sample.zip

2. give "npm i"

3. place this inside node_modules -
   @check-sass-styles.zip

4. then " npm run serve"

You will see an error

What is expected?

SASS varibales has to be over-ride

What is actually happening?

But throws below error:

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

background-color: lighten($color: $badge-info-bg-color, $amount: 10%);
                 ^
  Argument `$color` of `lighten($color, $amount)` must be a color
  in D:\today\vue-custom-scss-override-var979462978\node_modules\@syncfusion\ej2-notifications\styles\badge\_mixin.scss (line 2, column 23)

---

But for an html button i am not able to over-ride sass variable values

[karol-f]

It seems like @syncfusion @import '@syncfusion/ej2-base/styles/fabric-definition.scss'; is broken - it does not have $badge-info-bg-color variable (as opposed to @syncfusion/ej2-notifications/styles/badge/_fabric-definition.scss).

So it's clearly not vue-cli problem.

[haoqunjiang]

@karol-f Thanks for helping answer this question! 😄