SCSS 从@import 切换到@use: undefined mixin

Question

多年来，我一直对@import 非常满意，但时代在变...

所以我尝试将我的项目从@import 转移到@use 和@forward，我发现非常有用。但是当我尝试在我的偏音中实现@use 时，我一直得到 'undefined mixin'。我想我可能误解了@use 的工作方式，但我不能在我的生活中弄清楚我哪里出错了。我已经达到了我只想爬下一个教堂塔楼并开始射击人的地步......这也不能帮助我集中注意力;）

所以我将其全部剥离为非常基本的代码块，以检查 'lab conditions' 下的问题。这是我想到的：

文件夹和文件：

styles.scss
├── a_tools
│   └── _mixins.scss
├── b_settings
│   └── _global.scss
└── c-components
    └── _test.scss

_mixins.scss:

@use '../b_settings/global' as *;

@function bp($bp) {
  @return ($breakpoints, $bp);
}

@mixin vp-medium {
  @media (min-width: #{breakpoints(small) + 1}) and (max-width: #{breakpoints(medium)}) {
    @content;
  }
}

_gobal.scss:

$breakpoints: (
  'small':                                  767px,
  'medium':                                 1024px,
  'navigation':                             840px,
);

:root {
  --vp-name:                                small;
}

@include vp-medium {
  :root {
    --vp-name:                              medium;
  }
}

_test.scss:

@use 'a_tools/mixins' as *;
@use 'b_settings/global' as *;

.test {
  margin: 10px;

  @include vp-medium {
    margin: 20px;
  }
}

styles.scss:

@use 'c_components/test';

编译不断抛出 'undefined mixin on line 15, column 1 of _global.scss'，这是行 '@include vp-medium {'。使用 Dart Sass 1.32.8.

编译

谁能告诉我哪里走错了？提前致谢！

Answer 1

据我了解新规则 @use 方式，您必须 @use 需要的文件和需要的 mixin 到您想要使用它的每个文件。

如果我没猜错的话：

你 @used 文件 mixins 与 mixin vp-medium 在 test.scss 使用它的地方。

但是您没有 @use global 中想要使用混合的相同文件。只需尝试 @use 文件也 global.

附加：

我们在这里进行了类似的讨论：

SCSS 从@import 切换到@use: undefined mixin

SCSS switching from @import to @use: undefined mixin

sass

undefined

scss-mixins