Facing an issue where the CSS class name is not displaying correctly when utilizing CSS Modules with my React

Question

Facing an issue where the CSS class name is not displaying correctly when utilizing CSS Modules with my React

This webpack.config.js file is dedicated to the module section, where loaders are defined for JSX files and CSS.

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

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

In addition to the configuration in webpack, css-loader and style-loader have been installed as devDependencies as seen in package.json:

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

The challenge arises when trying to apply CSS styles within a React component using className:

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

Despite defining simple styles in Foodrecipe.css, changes are not reflecting in the UI when applied through className.

To troubleshoot, applying styles via id (#recipeDiv) instead of className showed successful results, indicating correct CSS file import but potential issues with the className attribute usage.

If you have any insights or guidance on resolving this issue, please share your thoughts. Thank you!

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

Answer 1

Answer №1

Solution Steps

If you are facing issues importing a css file as styles without utilizing CSS Modules, follow the first solution steps below. For an alternative method using CSS Modules, refer to the second solution provided.

To import the CSS file in a traditional HTML & CSS way, assign a class that contains the desired CSS properties and ensure it is imported using 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>
      );
   }
}

Alternative Solution

For utilizing CSS Modules, include query: { modules: true } in the css-loader. This allows for named imports of CSS files 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]"
        }
      }
    ]
  }
};

Answer 2

Solution Steps

If you are facing issues importing a css file as styles without utilizing CSS Modules, follow the first solution steps below. For an alternative method using CSS Modules, refer to the second solution provided.

To import the CSS file in a traditional HTML & CSS way, assign a class that contains the desired CSS properties and ensure it is imported using 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>
      );
   }
}

Alternative Solution

For utilizing CSS Modules, include query: { modules: true } in the css-loader. This allows for named imports of CSS files 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]"
        }
      }
    ]
  }
};

Answer 3

Answer №2

Consider bringing in the styles first and then implementing them on the div using className="recipe" instead of: className={styles.recipe}

Make the following adjustment:

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

Answer 4

Consider bringing in the styles first and then implementing them on the div using className="recipe" instead of: className={styles.recipe}

Make the following adjustment:

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

Facing an issue where the CSS class name is not displaying correctly when utilizing CSS Modules with my React

Answer №1

Solution Steps

Alternative Solution

index.js

webpack.config.js

Answer №2

Similar questions

The function "xml find" does not exist

Titanium: Warning upon initiation

Vuex was unable to locate the required dependency

Packages have gone astray post node_modules scrub

Learn how to insert JavaScript code into the head of an iframe using jQuery

Ensuring that md-select(s) created through ng-repeat are linked to the same model

Checking if children have certain text using jQuery

Preventing the "save" button from being enabled until a change has been made to at least one input field

Is it possible to maintain variables across a session with numerous users when utilizing socket.io?

Creating a subtle vanishing popup dialog using only CSS (no reliance on jQuery)

Center-align the text in the navigation bar

What's the best way to make a toast notification appear when an API call is either successful or encounters

What does the error message "TypeError: Bad argument TypeError" in Node's Child Process Spawn mean?

Implementing Mouse Scroll Click Functionality in ASP.NET with C# (Without JavaScript)

How can I line up elements in different divs when the width is adjusting based on the window size?

The fetch method in Express.js resulted in an error 404 because the requested URL could not be found

What is the best way to showcase an item from an array using a timer?

Having trouble retrieving a value from the $http promise, causing the code within the then() function to not run as expected

Is Flash consistently positioned above the other elements? Can it be corrected using CSS

AngularJS Cascading Dropdowns for Enhanced User Experience