嘗試使用 Rollup 和 PostCSS 從 Material 導入 Sass 變量時，為什么會出現“預期數字”？

Question

我有以下代碼...

@use "@material/top-app-bar/_variables.import" as mdc;
.color{
    background-color: lightblue;
    height: mdc.$row-height;
}

但是當我跑步時，我得到...

錯誤：預期數字。
src/components/header/index.style.scss 4:17 根樣式表

我猜我錯誤地導入了 Sass 文件。 我試過了...

@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;
}

等等......但我嘗試的一切都不起作用。 如何使用 sass 導入變量？

更新

我注意到了這一點

[!] (plugin postcss) 錯誤：應為數字。

src/components/header/index.style.scss 9:29 根樣式表

這可能是 Rollup 插件問題嗎？

更新 2

看起來問題的一部分是安裝 node-sass 包。 現在我得到...

[!] (plugin postcss) 錯誤：“...ight: variables”之后的 CSS 無效：預期的表達式（例如 1px，粗體），是“.$row-height;”

當我運行以下...

@use "@material/top-app-bar/variables" as variables;
.color{
    background-color: lightblue;
    height: variables.$row-height;
}

我也試過更簡單的

// ./_variables.scss
$row-height: 64px !default;

@use "./variables";
.color{
    background-color: lightblue;
    height: variables.$row-height;
}

我仍然得到同樣的東西。

Answer 1

我在使用 sass 顏色模塊時遇到了類似的問題。

我必須將以下內容添加到我的rollup.config.js

import sassPlugin from 'rollup-plugin-sass'
import sass from 'sass'

sassPlugin({
  runtime: sass,
  // Other properties omitted for brevity. 
})