How to configure Karma to include global scss files for an angular-cli project?
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 adevDependency
in yourpackage.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 :)
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']
},
});
};
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'
).