title: Why am I getting "Expected digit" when trying to import a Sass variable from Material using Rollup and PostCSS?
body: <p>I have the following code...</p>
  
  <pre><code>@use "@material/top-app-bar/_variables.import" as mdc;
  .color{
      background-color: lightblue;
      height: mdc.$row-height;
  }
  </code></pre>
  
  <p>But when I run I get...</p>
  
  <blockquote>
    <p>Error: Expected digit.<br>
    src/components/header/index.style.scss 4:17 root stylesheet</p>
  </blockquote>
  
  <p>I am guessing I am importing the Sass file incorrectly. I have tried...</p>
  
  <pre><code>@use "@material/top-app-bar/variables";
  .color{
      background-color: lightblue;
      height: variables.$row-height;
  }
  
  @use "@material/top-app-bar/mdc-top-app-bar";
  .color{
      background-color: lightblue;
      height: $mdc-top-app-bar-row-height;
  }
  </code></pre>
  
  <p>Etc... but nothing I try is working. How do I import the variable using sass?</p>
  
  <p><strong>Update</strong></p>
  
  <p>I noticed this further up</p>
  
  <blockquote>
    <p>[!] (plugin postcss) Error: Expected digit.</p>
    
    <p>src/components/header/index.style.scss 9:29  root stylesheet</p>
  </blockquote>
  
  <p>Could this be a Rollup plugin issue?</p>
  
  <p><strong>Update 2</strong></p>
  
  <p>Looks like part of the problem was installing the node-sass package. Now I get...</p>
  
  <blockquote>
    <p>[!] (plugin postcss) Error: Invalid CSS after "...ight: variables": expected expression (e.g. 1px, bold), was ".$row-height;"</p>
  </blockquote>
  
  <p>When I run the following...</p>
  
  <pre><code>@use "@material/top-app-bar/variables" as variables;
  .color{
      background-color: lightblue;
      height: variables.$row-height;
  }
  </code></pre>
  
  <p>I also tried the simpler </p>
  
  <pre><code>// ./_variables.scss
  $row-height: 64px !default;
  
  @use "./variables";
  .color{
      background-color: lightblue;
      height: variables.$row-height;
  }
  </code></pre>
  
  <p>And I still get the same thing.</p>