unable to use styles from local css file

Question

I am creating reactjs web app where I am trying to use styles from a local css file. Source code is given for reference.

/src/css/aboutcompany.css

.center {
    text-align: center;
    color: red;
}

/src/AboutCompany.js

import React,{Component} from 'react';
import style from './css/aboutcompany.css';

class AboutCompany extends Component{
  render(){
    return(
      <div>
        <p className="style.center"> Company</p>
        <hr/>
        Technologies  is leading  Company  providing end to end software solutions to customers globally. We are specialized in every vertical of industries and deliver quality solutions using latest technologies.
      </div>
    )
  }
}

export default AboutCompany;

webpack.config.js

var config = {
   entry: './src/index.js',
   output: {
      path:'/build/',
      filename: 'index.js',
   },
   devServer: {
      inline: true,
      port: 8081,
      historyApiFallback: true
   },
   module: {
      rules: [
        {
      test: /\.(jpg|png|svg)$/,
      use: 'url-loader'
    },
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: 'babel-loader'

         },
         {
          test: /\.css$/,
          use: 'css-loader'
        }
      ]
   }
}
module.exports = config;

As you can see in the AboutCompany.js here <p className="style.center"> Company</p> we are trying to use css class center , but it does not work. Can someone tell me where am I wrong.

Answer 1

To make use of css modules in development first you need to install style-loader:

$ npm install style-loader --save-dev

then in your configurations pass modules=true as an option to css-loader

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader?modules=true']
}

finally in your jsx code you can call your classes like this:

<p className={styles.center}/>

and you are done.