title: Styles not applying to the react component
body: <p>I have a component for a loading message but somehow the styles are not applying to it. </p>
  
  <p>Only the message is appearing on the page not the style.
  I tried adding it directly in the js and its working but not when I use the external style sheet. What is going wrong.</p>
  
  <p>.js file :</p>
  
  <pre><code>import style from './index.less';
  
  export default class Loading extends Component {
  
    render() {
          const {
              loading,
              message,
              iconClass,
              textClass,
              containerClass
          } = this.props;
          return (
              &lt;div className={containerClass || style.container}&gt;
                  &lt;div className={iconClass || style.icon}&gt;
                      &lt;div className={loading ? style.loading : null}/&gt;
                  &lt;/div&gt;
                  &lt;div className={textClass || style.text}&gt;
                      &lt;span&gt;{message}&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>less : </p>
  
  <pre><code>:local(.index){
  
    .container {
      margin: 0 auto;
      height: 200px;
      width: 300px;
    }
  
    .icon {
      height: 180px;
      fill: 'Red';
    }
  
    .text {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.43;
      letter-spacing: 0.6px;
      color: #58585b;
      color: var(--slate-grey);
      text-align: center;
    }
  
    .loading path:nth-of-type(1) {
      animation-delay: 0.1s;
      -o-animation-delay: 0.1s;
      -ms-animation-delay: 0.1s;
      -webkit-animation-delay: 0.1s;
      -moz-animation-delay: 0.1s;
    }
  
    .loading path:nth-of-type(2) {
      animation-delay: 0.2s;
      -o-animation-delay: 0.2s;
      -ms-animation-delay: 0.2s;
      -webkit-animation-delay: 0.2s;
      -moz-animation-delay: 0.2s;
    }
  }
  </code></pre>