title: unable to use styles from local css file
body: <p>I am creating reactjs web app where I am trying to use styles from a local css file. Source code is given for reference.</p>
  
  <p>/src/css/aboutcompany.css</p>
  
  <pre><code>.center {
      text-align: center;
      color: red;
  }
  </code></pre>
  
  <p>/src/AboutCompany.js</p>
  
  <pre><code>import React,{Component} from 'react';
  import style from './css/aboutcompany.css';
  
  class AboutCompany extends Component{
    render(){
      return(
        &lt;div&gt;
          &lt;p className="style.center"&gt; Company&lt;/p&gt;
          &lt;hr/&gt;
          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.
        &lt;/div&gt;
      )
    }
  }
  
  export default AboutCompany;
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>As you can see in the AboutCompany.js here <code>&lt;p className="style.center"&gt; Company&lt;/p&gt;</code> we are trying to use css class center , but it does not work. Can someone tell me where am I wrong.</p>