title: CSS Variables and String concatenation
body: <p>I'm trying to use CSS variables to generate a dynamic path. </p>
  
  <p><strong>Example</strong>:</p>
  
  <pre><code>:root {
    --fonts-path: "/path/to/font";
  }
  
  @font-face {
    font-family: "FontName";
    src: url(var(--fonts-path) + "/FontName-Light.woff") format('woff');
    font-weight: 100;
  }
  
  html {
    font-family: 'Metric', Arial, sans-serif;
  }
  </code></pre>
  
  <p>This is failing with a not-found module <code>'var(--hpe-fonts-path'</code>, this is the webpack log:</p>
  
  <pre><code>ERROR in ./~/css-loader?sourceMap&amp;modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/theme/fonts.css
  Module not found: Error: Cannot resolve module 'var(--fonts-path' in /Users/project-sample/src/theme
   @ ./~/css-loader?sourceMap&amp;modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/theme/fonts.css 6:83-114 6:234-265 6:403-434 6:576-607
  </code></pre>
  
  <p>Any pointers?</p>