Unable to include CSS generated by webpack ExtractTextPlugin

[cpbotha]

In my working webpack setup, I'm using ExtractTextPlugin() to extract a single CSS file corresponding to the bundle javascript. (as per the docs, each constituent javascript file requires the CSS file it needs)

I have karma-webpack working in that it's also putting my test javascript through webpack and successfully running the tests. Sourcemaps also work. (I have the sourcemap and webpack preprocessors both active)

How can I go about configuring Karma to refererence also the CSS bundles generated by webpack during the build?

(I did find karma-runner/karma#601 but this seems to be for including specific pre-existing CSS. I have not been able to use this feature to reference webpack-generated CSS)

[unissechua]

In our project, we also ran into this issue.

What we did, for karma's webpack config, we excluded the ExtractTextPlugin just for karma. So the styles will still be loaded into the head <style> tag.

Though we did run into another issue when running our app.js through the preprocessorwith ['webpack'].

We have require('./index') which is referencing to an .scss file and it doesn't seem to find the correct loader even after specifying in our webpack config file:

loaders: [ { test: /\.scss$/, loader: 'style-loader!css-loader!postcss-loader!sass-loader' } ]

Also added
resolve: { extensions: ['', '.js', '.scss'] }

to no avail.

Is there a way for karma-webpack to pickup the loaders in the preprocessors as well?

[MikaAK]

Typically you don't include ExtractTextPlugin except for production build

[MikaAK]

Closing as ExtractTextPlugin is unsupported. Maybe in the future!

[bostrom]

I suppose the same goes for file-loader? We're having trouble referencing static files (images, sounds) in our karma tests since they're generated by the file-loader loader (which creates new hashed files in the compile phase) but won't be served by karma.

Is there currently no way for karma to serve static files generated by the webpack compile process?

[maogongzi]

Any one has got solutions for this? I also ran into this when I want to test some Vue components that heavily rely upon css.

For example I have a Tabs component that supports dynamically adding tab panels, meanwhile the tabs header will automatically calculate the remained room after a label is added to header area and decide whether should display pagination buttons or not, without css the labels won't display in a row and possess sizes thus the size calculation logic fails, the question is the related css is generated by Webpack, as a result I can't include it into file list and get it loaded in advance so that I can test the component.

If this issue is resolved it would be a really nice thing so that we can test much more scenarios(as nowadays more and more features rely on css to work, test pure js functions is not enough now)

[codymikol]

As karma is now deprecated and coming up on EOL, we are no longer planning on any significant enhancements to this project and are instead going to focus on security updates, stability, and a migration path forward as karma's lifecycle comes to an end.

Thank you for supporting and using this project!