title: Using SCSS variables in CSS Modules
body: <p>I've a <code>_color.scss</code> file which consists of 400 colors as variables. And I've like 20 components which needs this color variables in their styles.</p>
  
  <p>I'm using SCSS + CSS Modules to construct my styles. As of now, I'm importing this <code>_color.scss</code> in each and every component's <code>style.scss</code>.</p>
  
  <p>Example:</p>
  
  <p><strong>component1.scss</strong></p>
  
  <pre><code>@import "color.scss";
  </code></pre>
  
  <p><strong>component2.scss</strong></p>
  
  <pre><code>@import "color.scss";
  </code></pre>
  
  <p><strong>component3.scss</strong></p>
  
  <pre><code>@import "color.scss";
  </code></pre>
  
  <p>Previously, when I was using SCSS standalone, I'll import the <code>color.scss</code> to my <code>index.scss</code> and import all the other styles below it. By this, the variables will be available across all the components.</p>
  
  <p>Example:</p>
  
  <pre><code>//index.scss
  @import "color.scss";
  @import "component1.scss";
  @import "component2.scss";
  @import "component3.scss";
  </code></pre>
  
  <p>Now, all the variables under <code>_color.scss</code> will be available under <code>component1.scss</code>, <code>component2.scss</code> and <code>component3.scss</code>. </p>
  
  <p>Is there a way to do something similar to this with <code>CSS Modules + SCSS</code>? A single place to declare global varibales?</p>