Dart sass 忽略 Foundation sass 文件中的导入

Question

我正在将 sass 和基础站点 sass 添加到项目中。我创建了一些示例 scss 文件来测试 @use 语句并确保自动前缀按预期工作。但是，我不明白为什么 sass 命令会忽略 foundation.scss 文件中的 @import 语句。我指定了 load-path 并且它清楚地找到了文件，它只是不尊重其中的 @imports。

我尝试指定一个额外的 --load-path=./node_modules/foundation-sites/** 以防万一 sass 不知道在哪里寻找基础导入，但没有成功。

注意：我在这里没有特别使用 node-sass，因为它（尚未）识别 @use 语句，但据我所知，此设置应该工作？

感谢任何见解！

更新： 凭直觉，我尝试将 @use 换成 app.scss 中的 @import 语句 - 结果相同。

更新 2： 添加了一个小 repo 来测试问题：https://github.com/webshooter/my-sass-issue

我的 sass 命令（运行通过 npm）：

sass --load-path=./node_modules/foundation-sites/scss --style=expanded ./src/scss:./public/css

(sass 版本 1.23.7 使用 dart2js 2.6.1 编译)

app.scss:

@use "other";
@use "sample";
@use "foundation";

.app {
  color: #141414;
}

.prefix-example {
  display: grid;
  transition: all .5s;
  user-select: none;
  background: linear-gradient(to bottom, white, black);
}

_other.scss:

.other {
  color: #ff9900;
};

_sample.scss:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

.sample {
  font: 100% $font-stack;
  color: $primary-color;
}

app.css: (输出)

.other {
  color: #ff9900;
}

.sample {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

/**
 * Foundation for Sites by ZURB
 * Version 6.6.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.app {
  color: #141414;
}

.prefix-example {
  display: grid;
  transition: all 0.5s;
  user-select: none;
  background: linear-gradient(to bottom, white, black);
}

/*# sourceMappingURL=app.css.map */

Answer 1

实际上我认为正确的 --load-path 使用是：./node_modules/foundation-sites/assets

尝试：

[可选] 将 @use 替换为 @import 语句 app.scss :

  @import "other";
  @import "sample";
  @import "foundation";

用这个编译你的sass个文件sass --load-path=./node_modules/foundation-sites/assets --style=expanded ./src/scss:./public/css

这应该可以解决导入问题

Dart sass 忽略 Foundation sass 文件中的导入

Dart sass ignores imports in Foundation sass files

css

sass

zurb-foundation