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

No, I'm using scss (and also semantic-ui-less) `import './view.scss';` (in SomeView.jsx) — Jakob Jingleheimer, Feb 16 '18 at 13:28
Do you have a special `webpack.config` file for karma? If so, you can configure to use `null-loader` for `*.scss` files — felixmosh, Feb 16 '18 at 13:34
Yes, I have a `webpack.config.test` and `webpack.config.coverage` (which both export an object containing only the `plugins` shown above). What're you looking for? — Jakob Jingleheimer, Feb 16 '18 at 13:36

score 6 · Answer 1 · answered Feb 16 '18 at 13:39

6

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

answered Feb 16 '18 at 13:39

felixmosh

32,615
9
69
88

I installed `null-loader` and pasted that into both webpack.config files, but I still get the same cannot file module error. – Jakob Jingleheimer Feb 16 '18 at 13:49
can you share small code with the error (on github) – felixmosh Feb 16 '18 at 13:52
what kind of code? the webpack.config and/or karma.config? – Jakob Jingleheimer Feb 16 '18 at 13:54
If that possible, small proj with one test and karma + webpack config that reproduces the problem – felixmosh Feb 16 '18 at 13:56
sure. it'll probably take a bit to put together. – Jakob Jingleheimer Feb 16 '18 at 13:59
https://github.com/jshado1/fetch-mock-test (sorry, npm install might have extra packages listed). 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` – Jakob Jingleheimer Feb 16 '18 at 15:56
Hi, sorry, I wasn't able to fix it :\ – felixmosh Feb 16 '18 at 20:53

Exclude scss files from karma

Sample project with failure

1 Answers1