Using css-loader inline with Webpack + React

Question

I'm building my React app with Webpack, and css-loader w/modules. I love it. Most of my stylesheets are very small, though, and I'd like to inline them within the same JSX file as my markup and JavaScript.

The CSS loader I'm using right now looks like this:

{ test: /\.(css)$/i, 
  loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") }

In my JSX, I import my separate CSS files like this:

import classNames from 'dashboard.css';
... 
<div className={classNames.foo}></div>;

This is then compiled and translated into something like:

<div class="xs323dsw4sdsw_"></div>

But what I'd like to do is something more like below, while still preserving the localized modules that css-loader gives me:

var classNames = cssLoader`
    .foo { color: blue; }
    .bar { color: red; }
`;

... 
<div className={classNames.foo}></div>;

Is this possible? How can I do this without having to actually require / import a separate file?

Craig McKenna · Accepted Answer · 2016-02-03 06:20:12Z

0

I believe your issue is that you your current webpack configuration uses CSS Modules. CSS Modules automatically rename your CSS Classes to avoid global class name collisions.

The fix:

// remove 'modules' from the end of your css-loader argument

{ test: /\.(css)$/i, 
  loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") }

// like so

{ test: /\.(css)$/i, 
  loader: ExtractTextPlugin.extract("style-loader", "css-loader") }

Now your class names will be preserved. Although, I'm not sure why you want to do this. Do you care to share why?

answered Feb 3, 2016 at 6:20

Craig McKenna

2683 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user5373139 Over a year ago

No, this is not what I want to do. I'm trying to remove the requirement of separate CSS files for small components. I'm already using Extract + modules, and I am happy with them. I simply want to trigger the css-loader functionality from within JavaScript files, instead of externalizing the content.

Collectives™ on Stack Overflow

Using css-loader inline with Webpack + React

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related