Webpack Scss mixin不应用样式 问题

所以我一直在努力让我的“px到vw”混音器在Scss中工作。然而，我一直遇到一个问题，比如在检查h1时，没有执行mixin，我将mixin返回到inspector内部

我的所有函数都已导入（从我所看到的）

我用什么 我运行Scss，并通过Next.js/Webpack编译

代码 首先，我的混音

Scss:

$design-size: 375;

@mixin get-vw($target) {
  font-size: (($target / $design-size) * 100) * 1vw;
}

定义mixin后，我尝试在变量标题上使用它，如下所示：

Scss

 --heading-1-size: get-vw(32);

但是，返回的结果如下：

使用的Webpack函数（不是整个函数，不包括字体渲染）：

---

在理想情况下，返回的值将是vw值。提前谢谢

该示例不起作用，因为您试图使用

@mixin

将css属性分配给css变量，您可以做的是将

get vw

转换为

@函数

，该函数可用于设置

--heading-1-size

的值

@function get-vw($target) {
  @return (($target / $design-size) * 100) * 1vw;
}

:root {
  --heading-1-size: #{get-vw(32)};
}

---

美好的这可用于定义

：root

中的字体大小！现在，我如何通过运行

getvw（20）

，在任何其他组件中使用相同的函数来实现这一点呢？谢谢您可以通过在选择器内部调用来覆盖元素的css变量的值，即

h1{--heading-1-size:{get vw（32）}；font-size:var（--heading-1-size）；}

这不是我真正的意思。当我在Checkbox.scss文件中时，我希望能够添加自定义尺寸。我还想把它用作填充：getvw（10）getvw（20）等：）这样你就可以添加自定义大小，这些大小将级联到子元素样式中，即

。复选框{--heading-1-size:{get vw（32）}；}。复选框>标签{font-size:var（--heading-1-size）；}

，你可以将其用作

填充：get vw（10）

，这就行了。这里的问题是，我每次都必须定义函数，现在，没有办法简单地导入它并在全球范围内使用它。

@function get-vw($target) {
  @return (($target / $design-size) * 100) * 1vw;
}

:root {
  --heading-1-size: #{get-vw(32)};
}