为什么@forward命名前缀不能使用Sass来处理变量？

Question

我在这里学习Sass，希望在理解为什么在转发scss文件时引用variables时这个前缀属性不起作用的过程中得到支持。

我使用dart-sass和react.js，利用package-aliasing而不是node-sass的优势，这样我就可以使用@use等等。

为了复制这个问题，我不能在codesandbox上使用它，所以我将在这里发布代码：

在src/library，我有两个部分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组件中，只是为了处理这些特性并了解事情是如何工作的。

下面是Chil1.js文件，以及随后的Chil1.scss文件：

儿童期1.js

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

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

儿童期1.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;
   │                      ^

我想这是在冲刺之后不接受$。我尝试使用variable放置string-interpolation，但没有成功。这会是react.js的问题吗？

提前谢谢！！

Answer 1

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

color: i.$var-color

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