title: VSCode: How to auto-complete React component className in scss file
body: <p>As title, I've tried plugin like <a href="https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion" rel="nofollow noreferrer">HTML to CSS autocompletion
  </a> and it works on <code>.html</code> file, for example:</p>
  <p><code>index.html</code></p>
  <pre><code>&lt;body&gt;
      &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
      &lt;div class=&quot;sections&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>Then in my <code>.scss</code> file the auto-complete for <code>.sections</code> works:</p>
  <pre><code>.App {
     .sec  /* Pressing &lt;Tab&gt; at the position following `c` will 
              trigger auto-complete. */
  }
  </code></pre>
  <pre><code>.App {
     .sections /* The result. */
  }
  </code></pre>
  <p>while this will not work for React component:</p>
  <pre><code>import &quot;./app.scss&quot;
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Topbar/&gt;
        &lt;div className=&quot;testing&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>the <code>./app.scss</code>:</p>
  <pre><code>.App {
     .tes /* Pressing &lt;Tab&gt; will not trigger auto-complete. */
  }
  </code></pre>