Exclude scss files from karma

Question

I want karma to completely ignore/not care/be completely oblivious to style files.

I've got the following in my webpack config, which causes webpack to not import the files during build.

plugins: [
    new webpack.IgnorePlugin(/\.(less|scss)$/), // ignore styles when running specs
    new webpack.IgnorePlugin(/client\/utils/), // ignore polyfills
],

However, when Karma runs, it tries to execute the imports, which of course fail:

Uncaught Error: Cannot find module "./view.scss"

I've tried adding pretty much very permutation of exclude in my karma config

exclude: [
    {
        pattern: '**/*.less',
        type: 'module',
    },
    {
        pattern: '**/*.scss',
        type: 'module',
    },
]

And I tried ignore-styles (which throws an error out of the box).

I just want it to skip the styles files because they have nothing to do with the tests and just waste time building. I don't understand how this is so difficult.

Sample project with failure

https://github.com/JakobJingleheimer/fetch-mock-test (sorry, npm install might have a few extra packages).

When you run the tests, you should get the following error:

Uncaught Error: Cannot find module "./test.scss" at webpack:///…/src/client/TestComponent.jsx:3:0

Answer 1

You can configure your webpack.config file that you pass to karma-webpack to use null-loader as a *.scss file loader.

Something like that:

module: {
    rules: [
      {
        test: /\.scss/,
        use: 'null-loader'
      }
    ]
  }