title: Sass mistakenly converts rgba function to hex
body: <p>I have the following SASS code in a SASS file which is imported to my Vue component in Nuxt 3:</p>
  <pre><code>.page {
    background-color: rgba(0, 0, 0, 0.87);
  }
  </code></pre>
  <p>I convert this to CSS using <code>nuxt generate</code> (with 3.0.0-rc.8), I get the following output:</p>
  <pre class="lang-css prettyprint-override"><code>.page {
    background-color: #000000de;
  }
  </code></pre>
  <p>This is wrong, because there is no opacity anymore. The output should be:</p>
  <pre class="lang-css prettyprint-override"><code>.page {
    background-color: rgba(0, 0, 0, 0.87);
  }
  </code></pre>
  <p><strong>What causes this problem?</strong></p>
  <p>Side note: I could use <code>opacity</code> property instead of <code>rgba</code>, but it cannot always replace <code>rgba</code>, for example if I have <code>box-shadow: 0 -0.1rem 0.4rem rgba(0, 0, 0, 0.5) inset;</code></p>