Css classname not applied to react component

Question

I appreciate your time and help. I spent hours trying to figure this out can't seem to get to the bottom of it.

I have this react component:

import styles from './style.scss';

class ButtonComponent extends React.Component { 
  render() {
    return (
      <div className={styles.bunny}>
        hello world
      </div>
    );
  }
}

and scss file:

.bunny {
  display: block;
  margin-top:50px;
  margin-bottom:55px;
  background-color: blue;
}

When I load up my html, the div has no classname when I expect it to be <div class="bunny">

When I put the class name in the react component literally like this:

<div className="bunny">

then I can see the className in the browser.

What am I doing wrong?

Thank you so much in advance.

I'm using the react-boiler-plate project, this is what I have in the webpack-base.babel.js `{ // Preprocess our own .css files // This is the place to add your own loaders (e.g. sass/less etc.) // for a list of loaders, see https://webpack.js.org/loaders/#styling test: /\.(s*)css$/, exclude: /node_modules/, use: ['style-loader', 'css-loader', 'sass-loader'], },` Not sure if this helps, can you be more specific? — johnwick0831, Feb 07 '18 at 23:55
Importing css or sass files does not actually import any javascript object that you can use inside your js files as css files do not export anything. It just tells your module bundler (webpack) to include the css file in your bundle if it uses your component somewhere. Just import the file with `import './style.scss'` and then use your classes as strings: `
`. Of course your html file will need to link the css file too. It's more like tellling webpack: "Hey webpack, this component uses classes from this sass file so include it in my bundle." — trixn, Feb 08 '18 at 01:05
Hi Trixn, this is not desired as I do not want to hard code classnames in js files. I have seen this working before but I'm not sure what I have configured wrong myself. — johnwick0831, Feb 08 '18 at 04:38
@calpang You do not appear to be using the `modules` property offered by webpack's `css-loader` in order to used modularized css where you can import the style sheet and reference the classes like object properties — Mark C., Feb 08 '18 at 14:27

score 2 · Answer 1 · answered Feb 08 '18 at 08:12

2

Firstly, you need to guarantee it's defined with: console.log(styles) Im' not sure you import style.scss correctly.

answered Feb 08 '18 at 08:12

Bing Nguyen

69
4

score 1 · Answer 2 · answered Feb 21 '19 at 05:39

1

You need to import your scss like... import './styles.scss';

Webpack will take care of bundling your styles so you can add the className as a string on your component.

<div className="bunny">Hello World</div>

answered Feb 21 '19 at 05:39

Luke Flournoy

3,393
2
16
22

UPS · Answer 3 · 2023-06-18T16:21:06.740

1

there was a similar problem. It turned out that I named the style file not news.module.scss, but news.modules.scss. After renaming "modules" to "module" and then importing the file, className started working

edited Jun 18 '23 at 16:21

answered Jun 18 '23 at 16:19

UPS

11
2

score 0 · Answer 4 · answered Jan 28 '21 at 17:35

0

What fixed this for me was to change the name of my scss file from style.scss to style.module.scss

answered Jan 28 '21 at 17:35

Chris HG

1,412
16
20

score 0 · Answer 5 · answered Jun 29 '21 at 14:42

0

For me it's because I use commonjs's require to load an es module.

answered Jun 29 '21 at 14:42

FrankGod

91
7

Css classname not applied to react component

5 Answers5