Style sheet is not styling React Component

Question

I searched for similar problems a lot but couldn't come up with a solution.

I integrated React.js with my working project. I am using Webpack.

Everything runs properly except styling.

I have Style.scss and I import this file in my react file. It compiles without an error but the actual style is not applying to the element.

The inline style works and other classes that are included normally also are fine.

Style.scss

.wtf {
  font-weight: bold;
  font-size: 40px;
}

Test.js

import React from 'react';
import '../Styles/Style.scss';
const style = {
  border: 'solid 5px green'
};

export default class Test extends React.Component {
  render() {
    return (
      <div style={style} className='wtf text-danger'>
        Am I React.Component? And I am working too?
      </div>
    );
  };
}

According to the snippet above, text-danger applies color red and border:solid 5px green works too, however, the style is specified in Style.scss is not working.

I checked compiled file and it seems like my scss style code exists there

This is the result in the browser

My webpack.config.js file content is below:

const path = require( 'path' );

module.exports = {
  mode: 'development',
  entry: {
    rooms: './react-src/rooms/rooms.js',
    tasks: './react-src/tasks/tasks.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve('../htdocs/react-dist')
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // style-loader
          { loader: 'style-loader' },
          // css-loader
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // sass-loader
          { loader: 'sass-loader' }
        ]
      },
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

Any idea what is the problem?

Solved

According to my example and my Webpack configuration, it was compiling styles so generating a new class name.

So, that huge token highlighted above is my actual class name which I have to use.

It can be imported as an Object so I can access class name as a property.

This is how it worked.

import React from 'react';
import style from '../Styles/Style.scss';

export default class Test extends React.Component {
  render() {
    return (
      <div className={style.wtf}>
        Am I React.Component? And I am working too?
      </div>
    );
  };
}

Answer 1

if you modify your webpack config to:

{...
  loader: 'css-loader',
    options: {
     modules: false
    },
...}

you can use regular className property