Making use of vanilla-framework without NPM for Jekyll Scss

Help
1

Hi :wave: I joined the #vanilla-framework chat, but I was the only one in the room, so I am asking the question here.

I am having trouble integrating vanilla-framework into my Jekyll project that doesn’t use NPM.

Is there an example of integrating this into Jekyll? I would like to keep the scss and how it is organized, but I receive use math errors when building with jekyll. I included other scss projects quite easily, but am having trouble with this framework.

I copied the scss files over into vanilla-framework folder and imported the _vanilla.scss, but that didn’t work.

I haven’t found any examples integrating this framework without nodejs or npm.

the error I receive is:

hydenjekyllorg-jekyll-serve-1  |   Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/main.scss':
hydenjekyllorg-jekyll-serve-1  |                     Error: Invalid CSS after "... $value: math": expected expression (e.g. 1px, bold), was ".div($value, $numbe" on line 96:19 of _scss/libs/vanilla-framework/_global_functions.scss from line 7:1 of _scss/libs/vanilla-framework/_settings.scss from line 1:1 of _scss/libs/vanilla-framework/_vanilla.scss from line 3:1 of _scss/styles.scss from line 1:1 of main.scss >> $value: math.div($value, $number); ------------------^ 
hydenjekyllorg-jekyll-serve-1  | /usr/gem/gems/jekyll-sass-converter-2.2.0/lib/jekyll/converters/scss.rb:200:in `rescue in sass_convert': Error: Invalid CSS after "...   $value: math": expected expression (e.g. 1px, bold), was ".div($value, $numbe" (Jekyll::Converters::Scss::SyntaxError)
hydenjekyllorg-jekyll-serve-1  |         on line 96:19 of _scss/libs/vanilla-framework/_global_functions.scss
hydenjekyllorg-jekyll-serve-1  |         from line 7:1 of _scss/libs/vanilla-framework/_settings.scss
hydenjekyllorg-jekyll-serve-1  |         from line 1:1 of _scss/libs/vanilla-framework/_vanilla.scss
hydenjekyllorg-jekyll-serve-1  |         from line 3:1 of _scss/styles.scss
hydenjekyllorg-jekyll-serve-1  |         from line 1:1 of main.scss
hydenjekyllorg-jekyll-serve-1  | >>       $value: math.div($value, $number);
hydenjekyllorg-jekyll-serve-1  | 
hydenjekyllorg-jekyll-serve-1  |    ------------------^

in _global_functions.scss line 96

// Raises a number to a power (https://css-tricks.com/snippets/sass/power-function/)
@function pow($number, $exponent) {
  $value: 1;

  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $number;
    }
  } @else if $exponent < 0 {
    @for $i from 1 through -$exponent {
      $value: math.div($value, $number);
    }
  }

  @return $value;
}
2

The math.div function seems to be the problem.

3

I also had interpolation errors with rgba and hsl.

I finally got Jekyll building vanilla, but I still haven’t fixed a patterns_chip problem and vanilla still isn’t compiled properly; in my converted css file I receive a lot of:

@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';@use 'sass:math';/*!

More information is here: Making use of vanilla-framework without NPM for Jekyll Scss. · Issue #4757 · canonical/vanilla-framework · GitHub