title: How to use CSS Global Variables?
body: <p>first of all thank you so much for your time.</p>
  <p>My doubt is simple, but i couldn't find a way to get it working.</p>
  <p>So... basically i have a '/pages/_app.js' file:</p>
  <pre><code>import '../public/styles/global.css';
  
  export default function MyApp({ Component, pageProps }) {
    return &lt;Component {...pageProps} /&gt;;
  }
  
  </code></pre>
  <p>A global css file '/public/styles/global.css':</p>
  <pre><code>:root {
    --bg-color: #000;
  }
  </code></pre>
  <p>A css module file '/public/styles/header.module.css':</p>
  <pre><code>.header {
    background-color: var(--bg-color);
  }
  </code></pre>
  <p>And finally a home page '/pages/index.js'that uses the css class:</p>
  <pre><code>import React from 'react';
  import headerStyle from '../public/styles/header.module.css';
  
  export default function Home() {
    return &lt;div className={headerStyle.header}&gt;Test&lt;/div&gt;;
  }
  </code></pre>
  <p>I don't get an error but i didn't manage to refer to the global variables inside the css modules.
  Can you guys help me with what am i doing wrong?</p>