title: How to share a css root constant to another css file?
body: <p>I'm trying to use the same colors again and again in my Angular test project. So, I made a constants.css where I declare my root constants which are all colors at the moment. However I'm stuck at trying to use them in my individual components' css files.</p>
  
  <p>I tried to include constants.css at the html file and doesn't work. I tried both @import url("constants.css") and @import "constants.css".</p>
  
  <p>constants.css</p>
  
  <pre class="lang-css prettyprint-override"><code>:root {
      --primary-color: #2c3e50;
      --secondary-color: #f1c40f;
      --background-color: #ecf0f1;
      --accent-color: #c0392b;
  }
  </code></pre>
  
  <p>nav.component.css</p>
  
  <pre class="lang-css prettyprint-override"><code>@import url("../../../constants.css");
  
  a.logo {
      color: var(--secondary-color);
  }
  </code></pre>
  
  <p>I expected my logo text to be yellow but it's just default black.</p>