2

我对 sass 有点新，但是当我学习它时，Sass 网站说要开始使用 @use 而不是 import，所以经过大量试验和错误后，我终于想出了如何使用它与 import 几乎相同.

注意：我使用 Prepros 进行编译。

我在一个mixins文件夹内它自己的文件中有这个mixin：

// scss/mixins/_flex.scss

@mixin flex($flex-flow: row, $justify-content: center, $align-items: center) {
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-flow: $flex-flow;
}

我尝试@use在我的主_mixins.scss文件中使用它：

// scss/_mixins.scss

@use "mixins/flex" as *;

然后我尝试在另一个包含常见元素的文件中使用它：

// scss/_common_elements.scss

@use "mixins" as *;

.flex {
  @include flex();
}

然后我在 Prepros 日志Undefined Mixin中收到错误：我调用该@include flex();行的位置（在 _common_elements.scss 内部）

它一直在工作，直到我决定将 mixin 放在他们自己单独的文件夹中，但这与它在 Bootstraps 源代码中的设置方式相同。

这整个使用过程@use真的很混乱。

有谁知道我为什么会收到这个错误？

4

2 回答 2

3

我设法修复它！

另外：如果您可以帮助我编辑此问题/答案以用适当的语言更好地解释它，请发表建议，我会更新它。

在_mixins.scss我需要使用的文件中，@forward "mixins/flex"而不是@use "mixins/flex" as *;：

像这样：

// scss/_mixins.scss 

@forward "mixins/flex";
@forward "mixins/overlay";
@forward "mixins/etc...";

我希望他们能在实际的sass @use 文档中更清楚地说明这一点。

这是@forward 的实际文档。

于 2020-05-29T11:23:16.637 回答
0

要使用@usesass 的命令和其他新功能，您需要安装 dart sass，而不是 node-sass；

https://www.npmjs.com/package/sass

于 2021-07-27T03:47:14.457 回答