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

Question

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 1

NO NPM PACKAGE: Angular Way

Add files in the angular.json-file within the stylePreprocessorOptions-property.

projects.your-project-name.architect.build.options and projects.your-project-name.architect.test.options should be the same:

{
  "projects": {
    "your-project-name": {
      "architect": {

        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/styles"
              ]
            },
            ...
          },
          ...
        },

        "test": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/styles"
              ]
            },
            ...
          },
          ...
        },

        ...

      },
      ...
    },
    ...
  },
  ...
}

---

@istibekesi, Angular framework has an angular.json configuration file in which you can add your style paths, so it will be included into the Karma/test build. Therefore it is not needed to install the karma-scss-preprocessor.

I was running into the same problem when importing my variables.scss into the stylesheets of my components (@import 'variables').

Answer 2

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']
    },

  });
};

Answer 3

The configuration of scss in karma is done as following:

module.exports = function(config) {
  config.set({
    files: [
      {
        pattern: 'scss/**/*.scss',
        watched: true,
        included: false,
        served: true
      },
      'test/unit-sass.css'
    ],
    preprocessors: {
      'scss/**/*.scss': ['sass']
    },
    sassPreprocessor: {
      source: 'scss/*.scss',
      createSourceMaps: true,
      outputDir:  __dirname + '/test/',
      outputFile: 'unit-sass.css'
    }    
  });
};

---

• The easiest way is to keep karma-sass-preprocessor as a devDependency in your package.json.

  { "devDependencies": { "karma": "~0.10", "karma-sass-preprocessor": "~0.0.1" } }

• You can simple do it by:

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

However sass-preprocessor isn't worth the time and really isn't best practice as the code in the question should work already, which will be explained below.

---

So at the end of the discussion in the chat we finally found out what was missing, which was quite silly:

require('karma-scss-preprocessor')

This was missing in the code itself and he finally managed to solve the problem! Hope it might help out any future users that look at this answer :)

Answer 4

Angular CLI already uses node-sass if you configure it to use sass. So there is no need to install it again:

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

should be sufficient. Plus you don't have multiple versions of node-sass in your project.

The rest of the solution of @istibekesi works like charm.

Answer 5

If you use Bootstrap-sass, You should describe karma.conf.js

preprocessors : {
  './src/test.ts': [ '@angular/cli' ],
  './node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss': [ 'scss' ],
  './src/*.scss': [ 'scss' ]
},

It is important write order that bootstrap is faster than your file.