Cannot use string literals for className in react CSS imports?

Question

This is the style.css file:

.cake {
  color: red;
}

This is index.js:

Fails:

import React from "react";
import ReactDOM from "react-dom";

import './style.css';

function App() {
  return (
    <div className="cake">Hello!</div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

The CSS styling fails to render and the text is just black in browser.

However, this does work:

Succeeds:

import React from "react";
import ReactDOM from "react-dom";

import styles from './style.css';

function App() {
  return (
    <div className={styles.cake}>Hello!!</div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

This is the relevant section of webpack.config.js:

      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true
            }
          }
        ]
      },

I would like to have the option of using the string literal version, and I'm a bit perplexed that many people online seem to have it available. Is there some webpack config change I can apply? Or am I missing something else here?

Are you using create-react-app?

user9408899
– user9408899

2020-01-30 14:23:39 +00:00
Commented Jan 30, 2020 at 14:23 — user9408899
– user9408899, Commented Jan 30, 2020 at 14:23
No I spun up my own package.

jsstuball
– jsstuball

2020-01-30 14:24:57 +00:00
Commented Jan 30, 2020 at 14:24 — jsstuball
– jsstuball, Commented Jan 30, 2020 at 14:24

Muhammad Ali · Accepted Answer · 2020-01-30 14:36:48Z

1

This will do the magic:

{
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: false
            }
          }
        ]
      },

Actually you've enabled css-modules, which in my opinion are really great to have. You can read more about css-modules here.

answered Jan 30, 2020 at 14:36

Muhammad Ali

2,6582 gold badges18 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Cannot use string literals for className in react CSS imports?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related