Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

To get CSS Modules working, I have to use ExtractTextPlugin in the dev config

See original GitHub issue

    loader: ExtractTextPlugin.extract('css?modules&camelCase=dashes&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap'),

Basically that.

So, i’m wondering, what is the downside of using ExtractTextPlugin in the webpack.dev.config

Issue Analytics

State:
Created 7 years ago
Comments:8

Top GitHub Comments

1reaction

rstudnercommented, Oct 10, 2016

Yep, I think that was it. Man. Thanks for that. Awhile back when I tried the ExtractStyle line, it had ‘style’, ‘<and all the rest>’ and I must have lost it in my wanderings in the desert.

0reactions

kwelchcommented, Oct 10, 2016

Main difference I saw was you were missing the style loader.

When comparing these two lines in your repo the style loading is missing.

Top Results From Across the Web

MiniCssExtractPlugin - webpack

⚠ The insert function is serialized to string and passed to the plugin. This means that it won't have access to the scope...

Using css modules with Extract Text Plugin - Stack Overflow

Apparently my setup was fine. The problem was that I didn't include all of my style (css/less) files in the "entry" webpack configuration....

Getting started with CSS modules in React - Pusher Blog

In this tutorial, we will explore how we can use CSS Modules in React to make maintaining our CSS files way easier and...

Separating CSS - SurviveJS

Webpack provides a means to generate a separate CSS bundles using mini-css-extract-plugin (MCEP). It can aggregate multiple CSS files into one. For this...

Next.js 5: Universal Webpack, CSS Imports, Plugins and Zones

module.exports = { webpack(config, { dev }) { // modify it! return ... that we have extensively refactored our codebase to make Webpack...