CODEWITHSUNDEEP
reactjswebpacksassstyles
n1md7
n1md7

Reputation: 3451

Style sheet is not styling React Component

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

enter image description here

This is the result in the browser

enter image description here

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.

enter image description here

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

Upvotes: 4

Views: 749

Answers (1)

voiys
voiys

Reputation: 299

if you modify your webpack config to:

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

you can use regular className property

Upvotes: 1

Related Questions