title: Using .less files with React
body: <p>I am trying to use .less files with a minimalist React app (created with <strong>create-react-app</strong>). I've added <code>less</code> and <code>less-loader</code> to my <em>package.json</em> as well as a module rule in my <em>webpack.config.js</em> file. The class reference is not being added to the HTML element however (should have <strong>class="customColor"</strong>).</p>
  
  <pre><code>&lt;p&gt;Hello world in a custom color.&lt;/p&gt;
  </code></pre>
  
  <p>I'm wondering what I'm doing wrong.</p>
  
  <h2>App.js</h2>
  
  <pre><code>import React from 'react';
  import './App.css';
  import styles from './custom.less';
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;header className="App-header"&gt;
          &lt;p className={styles.customColor}&gt;
            Hello world in a custom color.
          &lt;/p&gt;
        &lt;/header&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <h2>custom.less</h2>
  
  <pre><code>@custom-color: red;
  
  .customColor {
    color: @custom-color;
  }
  </code></pre>
  
  <h2>package.json</h2>
  
  <pre><code>{
    "name": "sample",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "react": "^16.9.0",
      "react-dom": "^16.9.0",
      "react-scripts": "3.1.1"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "devDependencies": {
      "less": "^3.10.3",
      "less-loader": "^5.0.0"
    }
  }
  </code></pre>
  
  <h2>webpack.config.js</h2>
  
  <pre><code>module.exports = {
      rules: [{
          test: /\.less$/,
          use: [{
              loader: 'style-loader',
          }, {
              loader: 'css-loader', // translates CSS into CommonJS
          }, {
              loader: 'less-loader', // compiles Less to CSS
          }],
      }],
  }
  </code></pre>