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.

Preconcert

How are you using the css-loader inside webpack? – Joellyn

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? – Preconcert

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." – Gine

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. – Preconcert

@Gine that is simply not true. – Joellyn

@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 – Joellyn

Answer 1

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

Bitters

Answer 2

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>

Gerenuk

Answer 3

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

Selfdetermination

Answer 4

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

Gossipmonger

Answer 5

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

Contaminate

Answer 6

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;
}

Mcdavid

Answer 7

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

Rawdan