Css @use不使用节点sass编译sass，所有内容都在sass目录中，使用@import everything works

我似乎找不到其他人对@use规则有这样的问题，我做错了什么？ 使用@import生成预期的css，使用@use没有错误，但生成的文件不是预期的css。。。以下是该问题的简化版本， //lists.sass ul，ol 文本对齐：左对齐

  & &
    padding:
      bottom: 0
      left: 0

// code.sass
code
  padding: .25em
  line-height: 0

// main.sass
@use 'code'
@use 'lists'

// main.css
// producing exactly...
@use 'code' {}@use 'lists' {}

// main.css
// should produce...
code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

如果我尝试@use to@include@mixin，我会得到错误“找不到mixin{mixin name}”，如果我添加名称空间corner.rounded，我会得到错误“在“@include corners:预期“}”之后无效CSS”，was.rounded；“”

使用@import

// main.sass
@import "corners"

.button
  @include rounded
  padding: 5px + $radius

生成预期的css

.button {
  border-radius: 3px;
  padding: 8px; }

@use

仅由

dart sass

使用。当您使用节点sass时，这不适用于您。您必须使用

@import

。

多亏了Gh05d（我将他的答案标记为有用），我找到了文档并安装了“dart”。 npm安装--保存开发人员sass 并在my package.json文件中添加了一个命令： “dart_build_css”：“sass-sass/main.sass样式表/main.css”， 我使用了以下sass源文件测试：

// corners.sass
$radius: 3px

@mixin rounded
  border-radius: $radius

// main.sass
@use "corners"

.button
  @include corners.rounded
  padding: 5px + corners.$radius

并获得了预期的css输出：

.button {
  border-radius: 3px;
  padding: 8px;
}

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

---

我投票决定结束这个问题，因为谷歌搜索会给出答案，而

@use

.button {
  border-radius: 3px;
  padding: 8px;
}

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