How to use jQuery to select a class name that's transformed by css-loader?

Question

I'm using webpack with css-loader. Everything has been working fine except that I don't know how to use jQuery to select a css-loader transformed class. The transformed class name looks something like this "src-styleauthTextboxLeft1Npf4" with the following css-loader configuration:

css?sourceMap&modules&importLoaders=1&localIdentName=[path][name]__[local]__[hash:base64:5]'

Here's the React code

const Auth = (props) => {
  const toggle = (event) => {
    // Working example
    $('#container').css('background', 'blue');

    // Not working
    $(styleCSS.container).css('background', 'green');
  };
  return (
    <div id="container" className={styleCSS.container} onClick={toggle} />
  );
};

Is there anyway to make the make the second selection works?

score 2 · Accepted Answer · answered Nov 22 '16 at 06:26

2

If styleCSS.container is a class, you would just need to add a . in front of it. Try this:

$('.' + styleCSS.container).css('background', 'green');

answered Nov 22 '16 at 06:26

davidatthepark

1,235
1
13
25

It didn't work. The compiled code is like this: "(0, _jquery2.default)('.' + _style2.default.authTextboxMask).css('background', 'blue');". It seems like css-loader doesn't transform class in js code – Yinan Fang Nov 22 '16 at 06:32
Can you console.log(styleCSS.container) and tell me the output? – davidatthepark Nov 22 '16 at 06:37
Oh. It work! It is the transformed name. I logged the wrong class before. Thanks so much for the help! – Yinan Fang Nov 22 '16 at 06:53
Not sure if I helped but no problem! – davidatthepark Nov 22 '16 at 06:57
1

Your solution is the correct solution. It's just that I put in the wrong classname the first time when I tried your solution so it didn't work. Now everything is fine! – Yinan Fang Nov 22 '16 at 07:32

How to use jQuery to select a class name that's transformed by css-loader?

1 Answers1