istibekesi istibekesi - 1 year ago 121
Sass (Sass) Question

How to configure Karma to include global scss files for an angular-cli project?

I cannot configure angular-cli + scss + karma to test my components together. Running

ng test
the kamra unit tests are only including the components' own scss styles.

In order to apply my main styles.scss in tests, I've tried to configure them in karma.conf.js:

files: [
{ pattern: './src/test.ts', watched: false },
{ pattern: './src/styles.scss' }, // main scss
{ pattern: './src/test.css' }, // just some test css to see if it is working
]
preprocessors: {
'./src/test.ts': ['@angular/cli'],
'./src/styles.scss': [ '@angular/cli' ]
}


Main scss is still not included during karma tests.
But the components own scss and the global css are applied.

How can I make it work?

Answer Source

Summary

Angular CLI supports all major CSS preprocessors, including sass/scss. Simply generate the project like this and almost everything will work:

ng new sassy-project --style=sass

However, if Karma is also involved, during tests the global scss files are not included. It seems an additional prepocessor is required for karma to process these scss files.

It was very confusing for me, but note there are two similar preprocessors out there. I do not recommend 'karma-sass-preprocessor', it is still available via npm, but the project seems to be deprecated. Use 'karma-scss-preprocessor' instead (karma-scss-preprocessor)

Installation

npm install karma-scss-preprocessor node-sass --save-dev

If you installed karma-sass-prepocessor before, first uninstall it by removing from package.json

Configuration

karma.conf.js

module.exports = function (config) {
  config.set({

    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma'),
      require('karma-scss-preprocessor')
    ],

    files: [
      { pattern: './src/test.ts', watched: false },
      { pattern: './src/dummy.scss', watched: true,  included: true, served: true },
      { pattern: './src/styles.scss', watched: true,  included: true, served: true }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli'],
      './src/dummy.scss': ['scss'],
      './src/styles.scss': ['scss']
    },

  });
};
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download