How to make karma work with sass

[MFateen]

I have my stylesheets as SASS. Everything is working perfectly, but when I try to run karma tests it fails giving me an error Module parse failed and says You may need an appropriate loader to handle this file type. I tried to install karma-sass-preprocessor and karma-scss-preprocessor but nothing seems to work. What should I do?

[codingwithrachel]

I just ran into the same issue yesterday.

Adding in the code below in webpack.test.js worked for me. { test: /\.scss$/, loader:'style!css!sass', exclude: [helpers.root('src/index.html')] },

[IAMtheIAM]

Thanks. I used this code inside webpack.common.js and webpack.test.js in the "loaders: []" argument and it loads Scss perfectly.

       /*
       * SASS loader support for *.scss files
       * Returns file content as string
       *
       * See: https://github.com/webpack/raw-loader
       */

      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
      }

[tbiinfotech]

I am using the same, but in my case processing hangs on 63%. I am using

{
  "name": "azimuth",
  "version": "0.2.0",
  "description": "Admin template based on Angular 2, Bootstrap 4 and Webpack",
  "author": {
    "name": "ThemeSeason",
    "url": "http://themeseason.com/"
  },
  "homepage": "http://azimuth.themeseason.com/",
  "license": "MIT",
  "keywords": [
    "angular2",
    "webpack",
    "typescript"
  ],
  "dependencies": {
    "@angular/common": "2.4.4",
    "@angular/compiler": "2.4.4",
    "@angular/core": "2.4.4",
    "@angular/forms": "2.4.4",
    "@angular/http": "2.4.4",
    "@angular/platform-browser": "2.4.4",
    "@angular/platform-browser-dynamic": "2.4.4",
    "@angular/router": "3.4.4",
    "angular2-countrypicker": "1.0.0",
    "angular2-datatable": "0.5.2",
    "angular2-google-maps": "0.17.0",
    "angular2-google-place": "1.0.7",
    "angular2-jwt": "^0.1.28",
    "angular2-modal": "2.0.3",
    "auth0-js": "8.4.0",
    "awesome-bootstrap-checkbox": "1.0.0-alpha.4",
    "bootstrap": "4.0.0-alpha.5",
    "chart.js": "2.4.0",
    "ckeditor": "4.6.1",
    "core-js": "2.4.1",
    "country-codes": "0.0.3",
    "datamaps": "0.5.8",
    "dropzone": "4.3.0",
    "ekko-lightbox": "5.1.1",
    "extract-text-webpack-plugin": "2.0.0-beta.3",
    "font-awesome": "4.7.0",
    "font-awesome-sass-loader": "1.0.3",
    "froala-editor": "2.4.0-rc.1",
    "fullcalendar": "3.1.0",
    "glyphicons-halflings": "1.9.0",
    "intl-tel-input": "11.0.7",
    "jquery": "3.1.1",
    "jquery-knob": "1.2.11",
    "jquery-slimscroll": "1.3.8",
    "jquery-ui": "1.12.1",
    "leaflet-map": "0.2.1",
    "lodash": "4.17.4",
    "moment": "2.17.1",
    "mydatepicker": "^2.0.26",
    "ng-intl-tel-input": "2.0.0",
    "ng2-breadcrumb": "0.5.6",
    "ng2-charts": "1.4.4",
    "ng2-ckeditor": "1.1.5",
    "ng2-cloudinary": "0.9.2",
    "ng2-currency-mask": "^4.0.2",
    "ng2-froala-editor": "1.0.14",
    "ng2-img-cropper": "0.8.6",
    "ng2-img-tools": "^1.0.4",
    "ng2-modal": "0.0.25",
    "ng2-pagination": "2.0.1",
    "ng2-popup": "0.4.0",
    "ng2-search-filter": "0.1.8",
    "ng2-search-table": "1.0.0",
    "ng2-toasty": "2.5.0",
    "ng2-validation": "3.8.0",
    "reflect-metadata": "0.1.9",
    "rxjs": "5.0.3",
    "sweetalert2": "6.4.3",
    "tether": "1.4.0",
    "topojson": "1.6.27",
    "tw-currency-select": "git+https://github.com/transferwise/tw-currency-select.git",
    "widgster": "0.0.3",
    "zone.js": "0.7.6"
  },
  "napa": {
    "pace": "https://github.com/HubSpot/pace.git#v0.7.1",
    "skycons": "https://github.com/darkskyapp/skycons.git#7095ecf5f653dbcadbddb0d317b42e65fe091eae"
  },
  "devDependencies": {
    "@types/core-js": "0.9.35",
    "@types/googlemaps": "3.26.2",
    "@types/node": "6.0.60",
    "@types/uglify-js": "2.0.27",
    "angular2-template-loader": "0.4.0",
    "awesome-typescript-loader": "2.2.4",
    "copy-webpack-plugin": "3.0.1",
    "css-loader": "0.25.0",
    "exports-loader": "0.6.3",
    "file-loader": "0.9.0",
    "html-webpack-plugin": "2.26.0",
    "imports-loader": "0.6.5",
    "json-loader": "0.5.4",
    "metrojs": "0.9.77",
    "napa": "2.3.0",
    "node-sass": "4.2.0",
    "raw-loader": "0.5.1",
    "resolve-url-loader": "1.6.1",
    "rimraf": "2.5.4",
    "sass-loader": "4.1.1",
    "sass-to-js": "1.3.0",
    "source-map-loader": "0.1.6",
    "style-loader": "0.13.1",
    "ts-helpers": "1.1.2",
    "typedoc": "0.4.5",
    "typescript": "2.0.2",
    "url-loader": "0.5.7",
    "webpack": "2.2.0",
    "webpack-dashboard": "0.2.1",
    "webpack-dev-middleware": "1.9.0",
    "webpack-dev-server": "2.2.0",
    "webpack-md5-hash": "0.0.5",
    "webpack-merge": "2.4.0"
  },
  "scripts": {
    "install": "napa",
    "rimraf": "rimraf",
    "build:prod": "webpack --config config/webpack.prod.js  --progress --profile",
    "build:dev": "webpack --config config/webpack.dev.js --progress --profile",
    "serve": "webpack-dev-server --inline --progress",
    "clean": "npm cache clean && npm run rimraf -- node_modules dist",
    "clean:dist": "npm run rimraf -- dist",
    "start": "npm run serve"
  },
  "repository": {
    "type": "",
    "url": ""
  },
  "readme": "README.md"
}

and in webpack.common.js

{ test: /\.scss$/, loaders: ['raw-loader', 'sass-loader'] },

Can you please help me out?