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

Is there a way to align the sort and search buttons to the right in the Antd Table header?

What is the best way to apply ngClass to style a JSON object based on its length?

Why won't the props pass down to the child component?

What is the process for integrating the node-menu package into my project without utilizing the require statement?

The axios.get() method is failing to retrieve the data on the client side

Conceal the popper for one field while revealing the popper for another field

CSS list items do not expand

How to link external css files in a Node.js project

How to Create a Bootstrap 4 Footer that is Perfectly Centered

How to display JSON containing nested objects in AngularJS using the ng-repeat directive

The functionality of the Jquery mobile panel ceases to work properly when navigating between pages within a multi-page

What is the best way to permanently hide a specific button in React.js?

The worth of the scope is evident, yet it remains undefined when trying to access it

How well are DOM Mutation Observers supported across different web browsers?

Upgrading to NPM version 7 or higher: A guide to effectively installing packages using the "lockfileVersion" parameter: 1

JavaScript causing attribute() variable to malfunction in CSS animation

Using Styled components and react-router-dom v6 to emphasize the active navigation link upon clicking

How can you trigger a 'hashchange' event regardless of whether the hash is the same or different?

What is the method for displaying html files in a POST request?

Social Engine is incapable of analyzing the HTML code