Search code examples
htmlcssnode.jswebpackwebpack-style-loader

Webpack: Using Component specific css render different in html?

By following this tutorial,

https://github.com/christianalfoni/react-webpack-cookbook/wiki/Loading-CSS#component-specific

i tried implementing this logic, this is how it is implemented.

Setup

webpack-config

This is how it is rendered on the web, HTML Render

As you can see the problem, css is not applied for the navbar class, because classname is rendered as ".app-components-navbar-navbar-navbar-wrapper". but the classname should be "navbar-wrapper"

  1. How to resolve this?
  2. Is this how it supposed to work?
  3. How can i achieve component specific css?
Solution

  • Inside your loader for the css, try changing the value for localIdentName from [path][name]-[local] to [local]. The ident name basically means that it will create css class name in the following format. ".app-components-navbar-navbar-navbar-wrapper" means app/component/navbar is place where it is defined and navbar is name of file. Local signifies your name of class in css.

    Hope it helps