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'
         }
      ]
   }

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 ponent 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.

• javascript
• css
• reactjs
• webpack-dev-server
• webpack-style-loader

Share Improve this question Follow edited Mar 10, 2018 at 19:52 Rito asked Mar 10, 2018 at 18:55 RitoRito 3,29833 gold badges3131 silver badges4242 bronze badges 2

• @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 ponent and be certain that it won’t leak into other ponents. – Rito Commented Mar 10, 2018 at 19:46
• 1 @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 Commented Mar 10, 2018 at 19:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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]"
        }
      }
    ]
  }
};

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>
      );
   }
}