为什么@forward 命名前缀不适用于使用 Sass 的变量？

Question

我在这里学习Sass，希望获得支持以了解为什么在转发scss 文件时引用variables 时此前缀属性不起作用。

我正在使用dart-sass 和react.js，利用package-aliasing 而不是node-sass，所以我可以使用@use 等。

我不能在codesandbox 上使用它来复制问题，所以我将代码贴在这里：

在 src/library 我有 2 个部分 scss 文件和一个 index.scss 文件到 @forward 我的东西：

_variables.scss

$color: darkgreen;

_mixins.scss

@mixin box-structure {
    width: 50vw;
    height: 50vw;
    background-color: yellow;
    margin: 0;
}

index.scss

@forward 'mixins' as mix-*;
@forward 'variables' as var-*;

index.scss 文件被导入到一个虚拟的react 组件中，只是为了使用这些功能并了解其工作原理。

这是 Child1.js 文件，随后是 Child1.scss 文件：

Child1.js

import React from 'react';
import './Child1.scss'

export default function Child1(props) {
    return (
        <div className="Child1">
            <h2>Child 1 Title</h2>
        </div>
    )
}

Child1.scss

@use '../library/index.scss' as i;

@function invert($color, $amount: 100%) {
    $inverse: change-color($color, $hue: hue($color) + 180);
    @return mix($inverse, $color, $amount);
  }
  
  $primary-color: #036;  

.Child1 {
    @include i.mix-box-structure; //this works as intended
    background-color: invert($primary-color);
    h2 {
        color: i.var-$color; //here is where the error occurs
}
}

如上所示，我将index.scss 导入为i 并将其应用到Child1.scss 的两个地方：

当我使用它来应用 mixin 时，它工作得很好，但是当我尝试应用前缀来使用 variable 时，我收到以下错误：

SassError: expected "(".
   ╷
14 │         color: i.var-$color;
   │                      ^

我猜它不接受破折号后的$。我尝试使用string-interpolation 放置variable，但没有成功。会是react.js 的问题吗？

提前致谢！！

Answer 1

我认为问题在于转发前缀的应用。您需要在 $ 之后添加它：

color: i.$var-color

看起来很奇怪，但如果我没记错的话，那就是转发前缀在 sass 中的工作方式。