Node + React - Hyphenated CSS Class Names

user_4858148 0
Viewed 12350

I'm currently using react-starter-kit and have a few react components each with their own styling file (scss). Basically, every component imports styling file on top like:

import s from './Header.scss';

Now, for css classes that do not have hyphens (e.g: 'notification'), I can use it without any problem, but I can't figure out how to use hyphenated css classes:

render() {
 return (
  <div className={s.header-inner}> </div>
 );
}

This obviously throws an error: 'inner is undefined'.

I changed header-inner to header_inner and the same in my component and it works fine but I can't do it as my css file is pretty huge with hundreds of classes.

Any help would be really appreciated.

Thanks

babeljs reactjs node.js sass css
3 Answers

You can set css class by dot without using a string inside a bracket.

See https://github.com/webpack/css-loader

If you set webpack config's css-loader to 

css-loader?camelCase

Now you can do something like this

<div className={s.headerInner}> </div>
user_55613690
Related