为什么在使用汇总和PostCSS从材料中导入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导入变量？

更新

我注意到更远的地方

!错误:预期数字。

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

这可能是一个汇总插件的问题吗？

更新2

看起来问题的一部分是安装节点-sass软件包。现在我得到..。

!错误:在"...ight：...ight“之后无效的CSS :预期表达式(例如，1 1px，粗体)，...ight”.$行高；

当我运行以下程序时..。

@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. 
})