Scss compiler error: Undefined variable


#1

Hello fellow Meteor users!
I’m working with Meteor 1.4 and recently purchased a Bootstrap 4 / Angular 2 theme pack

I’m working with integrating the styles, so I pulled the scss folder into my project, and added
@import “{}/client/scss/style.scss”;
to my main.scss

The meteor compiler is complaining about variables that are imported in one of the corresponding scss files:
So style.scss has
@import “bootstrap-variables”;

which has many of the variables that the compiler is complaining about
The following are the errors thrown.
Does anyone have any ideas to resolve this issue?

While processing files with angular2-compilers (for target web.browser):
/client/scss/vendors/angular2-calendar/angular2-calendar.scss: Scss compiler error: Undefined variable:
"$gray-lightest".

/client/scss/vendors/angular2-calendar/day-view.scss: Scss compiler error: Undefined variable:
"$border-color".

/client/scss/vendors/angular2-calendar/month-view.scss: Scss compiler error: Undefined variable:
"$gray-lightest".

/client/scss/vendors/angular2-calendar/week-view.scss: Scss compiler error: Undefined variable:
"$border-color".

/client/scss/vendors/chart.js/chart.scss: Scss compiler error: no mixin named border-radius

Backtrace:
{}/client/scss/vendors/chart.js/chart.scss:26

/client/scss/vendors/daterangepicker/daterangepicker.scss: Scss compiler error: no mixin named
border-radius

Backtrace:
{}/client/scss/vendors/daterangepicker/daterangepicker.scss:18

/client/scss/vendors/fullcalendar/fullcalendar.scss: Scss compiler error: Undefined variable:
"$border-color".

/client/scss/vendors/gauge.js/gaugejs.scss: Scss compiler error: Undefined variable: “$text-muted”.

/client/scss/vendors/ionRangeSlider/ionRangeSlider.scss: Scss compiler error: Undefined variable:
"$gray-lighter".

/client/scss/vendors/toastr/toastr.scss: Scss compiler error: no mixin named border-radius

Backtrace:
{}/client/scss/vendors/toastr/toastr.scss:102


#2

Don’t you need a scss build plugin, like this?


#3

Yes. Unfortunately, I have a package , angular2-compilers which is handling the scss compilation. Adding fourseven:scss creates a conflict as you are only permitted 1 scss compiler.

I’ll look into identifying an issue with the angular2-compilers package.

Thank you for the reply.


#4

The issue is resolved. I had taken the scss folder and placed it under client. It needed to be under client/imports folder.
angular2-compilers package is now successfully compiling scss.