Gulp sass issue with importing node_modules that start with tilde

Question

I'm converting .scss files to .css through a gulp sass task. The issue is that the base .scss file contains imports that contain other imports. These imports start with

~@angular/material/core/etc/etc

The tilde results in the following error:

events.js:160
  throw er; // Unhandled 'error' event
  ^
Error: node_modules\@covalent\core\chips\_chips-theme.scss
Error: File to import not found or unreadable: ~@angular/material/core/theming/theming.
Parent style sheet: C:/Users/laurensk/Documents/Playground/node_modules/@covalent/core/chips/_chips-theme.scss
    on line 1 of node_modules/@covalent/core/chips/_chips-theme.scss
>> @import '~@angular/material/core/theming/theming';
   ^

There's a custom importer called node-sass-tilde-importer but I am unsure if it's possible to implement this into my gulp sass task.

My code:

var gulp = require("gulp"),
sass = require("gulp-sass");
//var replace = require('gulp-replace');
//var sassGlob = require('gulp-sass-glob');
//var tildeImporter = require('node-sass-tilde-importer');

gulp.task("sass", function () {
  return gulp
    .src('Styles/theme.scss')
    .pipe(sass())
    .pipe(gulp.dest('wwwroot/dist'));
});

I've tried replace to replace '~' with './node_modules' but it throws the same error.

Any input would be appreciated!

Answer 1

gulp-sass accept all node-sass properties. So you just need to configure gulp-sass with the node-sass-tilde-importer importer:

var gulp = require("gulp"),
sass = require("gulp-sass");
var tildeImporter = require('node-sass-tilde-importer');

gulp.task("sass", function () {
 return gulp
  .src('Styles/theme.scss')
  .pipe(sass({
      importer: tildeImporter
   }))
  .pipe(gulp.dest('wwwroot/dist'));
 });