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

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').