Search code examples
jsonimportsassgulp

theme.json not loading from scss @import method while running gulp task

I am trying to import theme.json file into scss file and also mapped all the json values in my scss file with the map-get methodology.

Below is the code I am trying to compile to css:

gulp.task('sass', function() {
  console.log(util.env.type);
  var epub = gulp.src(['app/epubsource/themes/default/main.scss'])
    .pipe(compass({
      config_file: 'node_modules/gulp-compass/test/config.rb',
      sourcemap: true,
      css: 'app/epubsource/themes/default',
      sass: 'app/epubsource/themes/default'
    }))
    .pipe(gulp.dest('app/epubsource/themes/default/'))
    .pipe(reload({
      stream: true
    }));
    return mergeStream(epub);
});

Below is the code for importing json in main.scss file:

@import "theme.json";

BTW, both main.scss and theme.json are on the same folder level.

Below is the error I am getting:

LoadError on line ["54"] of C: cannot load such file -- sass-globbing
Run with --trace to see the full backtrace

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: Compass failed

Please help me to get out from this issue.

Solution

    1. Uninstalled all the sass and compass dependencies and re-installed.

    2. Now in node_modules>test>config.rb, add a dependency 'sass-json-vars' like sass-globbing.

    3. Now, try to compile. That works like a charm!