CSS className not reflecting when using CSS Modules in my React Component

Question

This is the module section of my webpack.config.js file

  module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            // loader: 'babel',
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         },
         {
           test: /\.css$/,
           loader:'style-loader!css-loader'
         }
      ]
   }

I have also installed css-loader and style-loader, this is how the package.json file looks -

"devDependencies": {
    "css-loader": "^0.28.10",
    "style-loader": "^0.20.3"
}

This is my react component where I am trying to implement the CSS -

import React from "react";
import styles from "./Foodrecipe.css";

export default class Foodrecipe extends React.Component {
   render() {
      return (
         <div className={styles.recipe}>
            <h1>Healthy Main Dish Recipes</h1>
         </div>
      );
   }
}

The CSS recipe class in Foodrecipe.css file is quite simple, its just -

.recipe{
  background-color: yellow;
  color: blue;
}

But for some reason, the CSS change is not reflecting in the UI.

One more thing I would like to point out is when I am adding the attribute id to the div and naming it recipeDiv, and declaring the style of the id in the CSS -

#recipeDiv {
  background-color: yellow;
  color: blue;
}

the changes are reflecting in the UI. So I am pretty sure that the CSS file is getting imported correctly here but there seems to be some issue with className attribute. That's what I think. Can anyone guide me here.

@T.J.Crowder I am new to React and I am trying to implement CSS Modules with React and Webpack. One of the advantage of CSS Modules is, it allow us to write scoped CSS. We can write CSS for a component and be certain that it won’t leak into other components. — Rito
– Rito, Commented Mar 10, 2018 at 19:46
@T.J.Crowder true, I updated my question headline. So that in future people facing this issue can exactly know that this question is all about. — Rito
– Rito, Commented Mar 10, 2018 at 19:54

deadcoder0904 · Accepted Answer · 2018-03-11 10:16:40Z

4

Solution 1

You are trying to import css file as styles without using CSS Modules. Check Solution 2 if you want to do it like that.

So just like you do in vanilla HTML & CSS, just give a class whose css property you want to use & make sure you just import it like import './Foodrecipe.css'.

import React from "react";
import "./Foodrecipe.css";

export default class Foodrecipe extends React.Component {
   render() {
      return (
         <div className="recipe">
            <h1>Healthy Main Dish Recipes</h1>
         </div>
      );
   }
}

Solution 2

Use query: { modules: true } in css-loader to use it as CSS Modules, i.e, named import for a css file like import styles from './FoodRecipe.css'

index.js

import React from "react";
import styles from "./Foodrecipe.css";

export default class Foodrecipe extends React.Component {
   render() {
      return (
         <div className={styles.recipe}>
            <h1>Healthy Main Dish Recipes</h1>
         </div>
      );
   }
}

webpack.config.js

const path = require("path");

module.exports = {
  entry: ["./src/test.js"],

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "engine.js"
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /(node_modules)/,
        query: {
          presets: ["es2015", "stage-2"]
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader"
      },
      {
        test: /\.css$/,
        loader: "css-loader",
        query: {
          modules: true,
          localIdentName: "[name]__[local]___[hash:base64:5]"
        }
      }
    ]
  }
};

edited Mar 11, 2018 at 10:16

answered Mar 10, 2018 at 19:10

deadcoder0904

8,96118 gold badges93 silver badges212 bronze badges

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

10 Comments

Rito Over a year ago

But the examples which I went through are doing it the same way, they are importing the file as styles. Why is it working for them and not for me? This is one of those examples: javascriptplayground.com/css-modules-webpack-react

Nicholas Over a year ago

@Rito your modules config its not the same as its in the article

deadcoder0904 Over a year ago

you need to use css-modules for that. Checkout medium.com/@sapegin/… for more info. Note you only need {modules:true} in css-loader config for that to work. Not sure though as I never did that.

Rito Over a year ago

@deadcoder0904 you are right, the missing piece was {modules: true}. This is the change I did in the webpack config file and it worked for me. Thanks a lot. Can you update your answer with this info, so that I can approve it.

Rito Over a year ago

@T.J.Crowder other than the article link that I shared above, you can also check this article, it also says the same thing. javascriptstuff.com/css-modules-by-example/…

|

baeyun · Accepted Answer · 2018-03-10 19:06:19Z

-1

Try importing the styles then apply them to the div with className="recipe" intead of: className={styles.recipe}

Do this:

import React from "react";
import "./Foodrecipe.css";

export default class Foodrecipe extends React.Component {
   render() {
      return (
         <div className="recipe">
            <h1>Healthy Main Dish Recipes</h1>
         </div>
      );
   }
}

edited Mar 10, 2018 at 19:06

answered Mar 10, 2018 at 18:58

baeyun

2281 silver badge6 bronze badges

3 Comments

T.J. Crowder Over a year ago

Why? What did you change? Why did you change it? How does that address what the OP is trying to achieve? Code dumps are not useful answers.

baeyun Over a year ago

Look carefully.

T.J. Crowder Over a year ago

You're completely missing the point. "Do this:" isn't an answer. At least you've now added some minimal explanation with an edit. It's not at all clear, though, that the OP isn't trying to do something more involved, though.

Collectives™ on Stack Overflow

CSS className not reflecting when using CSS Modules in my React Component

2 Answers 2

Solution 1

Solution 2

index.js

webpack.config.js

10 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution 1

Solution 2

index.js

webpack.config.js

10 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related