chris_dev chris_dev - 1 year ago 140
Sass (Sass) Question

React+Sass+Webpack local styling issue

I'm using a using a 3rd party react component, and I'm having trouble configuring my sass correctly. This component creates a series of

html tags, and if one of the
has been clicked on it adds gives that item an "active" class name:
<li class="active">
. I would like to customize the css for that active
element. To do this, I created a Test.scss file containing the following:

.tag_input {
font-weight: bold;
text-decoration: underline;
color: red;

To use this styling, I do the following react

import classes from './Test.scss'
export const Test = (props) => {
return (
tags: classes.tag_input,

The problem is that when Webpack loads this Sass file, it uses css-loader, which converts each classname in each local .sass file to the following format: "localIdentName=[name]_[local]__[hash:base64:5]". That means my css no longer applies to a
<li class="active">
. Instead it now works for
<li classname="Test__active___2LBGS">
. I've thought of two (bad) solutions so far:

  1. I somehow reconfigure webpack to not rename certain css class names using the localIdentName

  2. I somehow get
    <ReactTags />
    to use the classname: Test__active___2LBGS

Neither of these seem feasible so I'm pretty stuck!! Any help is much appreciated.

Answer Source

As stated in the css-loader documentation under Local scope you can apply :global to styles, that you don't want the loader to convert:

:global (.tag_input {
  font-weight: bold;
  text-decoration: underline;
  color: red;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download