title: Importing CSS variables into a Typescript file
body: <p>We created a theme.css :root file with a number of commonly used variables to use across the various other .css files for our app.</p>
  
  <p>But some of our older code has a similar setup, but in a theme.ts file with some variables. I want to import the variables from our theme.<strong>css</strong> into our theme.<strong>ts</strong> so that everything can be manipulated from that single css file.</p>
  
  <p>I've checked out a few links, like <a href="https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10" rel="nofollow noreferrer">this article</a> on medium, and <a href="https://stackoverflow.com/questions/35014132/use-css-modules-in-react-components-with-typescript-built-by-webpack?noredirect=1&amp;lq=1">this answer</a> here on stackoverflow, but no dice.</p>
  
  <p>I wanted to see if I could get it working so I did the quick and dirty way of <code>const s = require('./theme.css')</code>, but I wasn't able to correctly assign the variables.</p>
  
  <p>Here's <strong>theme.css</strong></p>
  
  <pre><code>:root {
    --primaryColor: #427ee1;
    --secondaryColor: #f2f2f2;
    --chatBackground: #fff;
    --typingAnimationDots: #427ee1;
    --typingAnimationFill: #f2f2f2;
    --userResponseColor: #427ee1;
    --fontType: 'Open Sans';
    --hoverFillColor: #306aca;
    --hoverFontColor: #f2f2f2;
  }
  </code></pre>
  
  <p>And <strong>theme.ts</strong> with examples of each of my unsuccessful attempts at calling a variable name</p>
  
  <pre><code>const s = require('./theme.css')
  
  const botMessageBackgroud = s.secondaryColor   // returns black like its undefined
  const botMessageBorder = s['--primaryColor']   // also returns black
  const botMessageColor = s[':root']['--primaryColor']   // cannot read --primaryColor of undefined
  </code></pre>
  
  <p>So I'm thinking that my method of calling the variables is wrong, or maybe I do need to import an outside dependency? Thanks, and let me know if you need  any other information.</p>
  
  <p>edit**
  Here's something else I've tried that hasn't worked out. I was pretty excited because I thought it worked. But it didn't.</p>
  
  <pre><code>const s = require('./theme.css')
  console.log('s &gt;&gt;&gt; ', s)
  
  const callVar = (varName: string) =&gt; {
    return getComputedStyle(document.documentElement).getPropertyValue(varName)
  }
  const botMessageBorder = callVar('--primaryColor')
  const botMessageColor = callVar('--primaryColor')
  </code></pre>
  
  <hr>
  
  <p>edit** Forgot some critical information here. <strong>theme.css</strong> gets its values from our api through a mobx state tree:</p>
  
  <pre><code>export const BotCSS = types.model({
    chatBackground: types.optional(types.string, '#fff'),
    fontType: types.optional(types.string, 'Open Sans'),
    hoverFillColor: types.optional(types.string, '#306aca'),
    hoverFontColor: types.optional(types.string, '#f2f2f2'),
    primaryColor: types.optional(types.string, '#427ee1'),
    secondaryColor: types.optional(types.string, '#fff'),
    typingAnimationDots: types.optional(types.string, '#427ee1'),
    typingAnimationFill: types.optional(types.string, '#f2f2f2'),
    userBoxColor: types.optional(types.string, '427ee1'),
    userResponseColor: types.optional(types.string, '#fff'),
    widgetShape: types.optional(types.string, '50%')
  })
  
  export type IBotCSS = typeof BotCSS.Type
  </code></pre>
  
  <p>So I can probably just import those mobx values in to the TS sheet, right? Or make a view on the model.</p>
  
  <p>edit** still working on this. However I haven't imported an MST into a plain js/ts file before. Only have experience with importing it into components. I've been looking at some various resources but if anyone can point me in the right direction I'd really appreciate it</p>