title: Gatsby.js css: custom properties
body: <p>I installed gatsby cli and created a basic node / gatsby.js project.
  The tutorial says "<em>Gatsby works out of the box with CSS Modules.</em>"
  I also wanted to use custom css properties as described here: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables</a></p>
  
  <p>(1) I created <code>src/layouts/variables.css</code> and put in css with custom properties, like:</p>
  
  <pre><code>:root {
      --brand-color: #ff3333;
  }
  </code></pre>
  
  <p>(2) Then in <code>src/layouts/index.css</code> I added <code>@import './variables.css'</code> at the very top of the css file.</p>
  
  <p>(3) because of the @import in the above step, I installed and added <code>postcss-import</code> as the first plugin, in my <code>gatsby-config.js</code> file. Not sure if this is correct, as it isn't named 'gatsby-plugin-*' like the other plugins.</p>
  
  <p>(4) in my footer component (<code>src/components/Footer</code>) I have both index.js and index.module.css. In the <code>index.module.css</code> I put:</p>
  
  <pre><code>.footer {
    color: var(--brand-color);
  }
  </code></pre>
  
  <p>... thinking that --brand-color will cascade via imports through src/variables.css -> src/index.css -> src/index.js -> layouts/index.js -> my footer component.</p>
  
  <p>But when I run gatsby-develop, it says:</p>
  
  <p><strong>warning  in ./src/components/Footer/index.module.css</strong></p>
  
  <p><strong>postcss-custom-properties: /path/to/src/components/Footer/index.module.css:2:3: variable '--brand-color' is undefined and used without a fallback.</strong></p>
  
  <p>How can I fix this error? It does not allow the website to display properly.</p>