Uikit: [SASS] $inverse-global-* variables are undefined

[thibaultmeyer]

Hello,

It seems that $inverse-global-* variables are missing on the SASS version.

Here the gulpfile.js I using:

var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('stylesheet', function () {
    return gulp.src('__sources__/uikit/src/scss/uikit.scss')
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .pipe(rename('application.min.css'))
        .pipe(gulp.dest('assets/css', {
            overwrite: true
        }))
});

[11:18:51] Using gulpfile ~\Documents\Programmation\zero-x-baadf00d\uikit-3\gulpfile.js
[11:18:51] Starting 'stylesheet'...

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: __sources__\uikit\src\scss\components\base.scss
Error: Undefined variable: "$inverse-global-color".
        on line 616 of __sources__/uikit/src/scss/components/base.scss
>> se-base-color:                            $inverse-global-color !default;
   ------------------------------------------^

    at options.error (C:\Users\thiba\Documents\Programmation\zero-x-baadf00d\uikit-3-demo\node_modules\node-sass\lib\index.js:291:26)

[florianletsch]

It won't be enough to compile uikit.scss directly. You need to create an additional scss file with several imports. Then, compile that file instead. Please refer to the documentation, it explains the required steps https://getuikit.com/docs/sass

[thibaultmeyer]

thanks. it now working.

[Recoil60]

What is the logic around using $inverse-global-* in one and $global-inverse-* in the other? If you don't want the theme-variant it throws a build error.