Karma.config: sass tilde importer

Question

I set up an angular 6 project by angular-cli.

I installed karma-scss-preprocessor as dev dependency to load sass file in karma test. Following karma.config:

...
config.set({
basePath: '',
browserNoActivityTimeout: 60000,
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
  require('karma-jasmine'),
  require('karma-chrome-launcher'),
  require('karma-phantomjs-launcher'),
  require('karma-jasmine-html-reporter'),
  require('karma-coverage-istanbul-reporter'),
  require('@angular-devkit/build-angular/plugins/karma'),
  require('karma-scss-preprocessor')
],
preprocessors: {
  'styles.scss': ['scss'],
},
files: [
  { pattern: 'styles.scss', watched: true,  included: true, served: true }
],
...

Now I get the error:

File to import not found or unreadable: ~@onepackage/onelib/scss/all.

due to tilde at the import of onepackage/lib in styles.scss.

I've tried to add require('node-sass-tilde-importer') in plugins section of karma.json, but it doesn't solve.

Any suggestion?

user_8345187 · Answer

You have to call require('node-sass-tilde-importer') in karma-scss-preprocessor options

...
plugins: [
  require('karma-jasmine'),
  require('karma-chrome-launcher'),
  require('karma-phantomjs-launcher'),
  require('karma-jasmine-html-reporter'),
  require('karma-coverage-istanbul-reporter'),
  require('@angular-devkit/build-angular/plugins/karma'),
  require('karma-scss-preprocessor')
],
scssPreprocessor: {
  options: {
    importer: require('node-sass-tilde-importer')
  }
},
...

Karma.config: sass tilde importer

1 Answers