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
– johnwick0831, Commented Feb 7, 2018 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: <div className="bunny">. 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
– trixn, Commented Feb 8, 2018 at 1: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
– johnwick0831, Commented Feb 8, 2018 at 4:38

Bing Nguyen · Accepted Answer · 2018-02-08 08:12:27Z

2

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

answered Feb 8, 2018 at 8:12

Bing Nguyen

694 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luke Flournoy · Accepted Answer · 2019-02-21 05:39:14Z

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, 2019 at 5:39

Luke Flournoy

3,8333 gold badges18 silver badges22 bronze badges

Comments

UPS · Accepted Answer · 2023-06-18 16:21:06Z

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, 2023 at 16:21

answered Jun 18, 2023 at 16:19

UPS

112 bronze badges

Comments

Chris HG · Accepted Answer · 2021-01-28 17:35:12Z

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, 2021 at 17:35

Chris HG

1,49216 silver badges21 bronze badges

Comments

FrankGod · Accepted Answer · 2021-06-29 14:42:21Z

0

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

answered Jun 29, 2021 at 14:42

FrankGod

917 bronze badges

Comments

D. Schmidt · Accepted Answer · 2024-08-29 06:38:23Z

0

I had different problem, that is not mentioned here, but that causes the same behavior (the class name is just not added to the output): Make sure you use a valid css identifier for your class name.

I used snake-case:

.spanning-grid-item {
  flex-grow: 1;
}

But I should have used camelCase instead:

.spanningGridItem {
  flex-grow: 1;
}

answered Aug 29, 2024 at 6:38

D. Schmidt

1671 silver badge7 bronze badges

Comments

二号去听经 · Accepted Answer · 2024-08-29 07:18:09Z

0

module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?modules"
      },
    ]
  }
};

Check if the module query parameter exists in your css-loader configuration. If not, add it, This means that the cssModel is opened, And your className will eventually be compiled to a globally unique string

answered Aug 29, 2024 at 7:18

二号去听经

12 bronze badges

Collectives™ on Stack Overflow

Css classname not applied to react component

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related