@use 不使用 node-sass 编译 sass，一切都在 sass 目录中，使用 @import 一切正常答案

【问题标题】：@use does not compile sass using node-sass, everything is in sass directory, using @import everything works@use 不使用 node-sass 编译 sass，一切都在 sass 目录中，使用 @import 一切正常
【发布时间】：2020-10-21 09:51:36
【问题描述】：

我似乎找不到其他人对@use 规则有此问题，我做错了什么？使用 @import 产生预期的 css，使用 @use 没有错误，但生成的文件不是预期的 css ... 下面是问题的简化版本， // 列表.sass 噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢文本对齐：左

  & &
    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 到 @include @mixin 我得到错误“没有找到 mixin {mixin name}”，如果我添加命名空间corner.rounded 我得到错误“Invalid CSS after” @include corners“：预期” }", 是 ".rounded;""

// corners.sass
$radius: 3px

@mixin rounded
  border-radius: $radius

// main.sass
@use "corners"

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

使用@import...

// main.sass
@import "corners"

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

产生预期的 css...

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

【问题讨论】：

我投票结束这个问题，因为谷歌搜索会给出答案——编译器支持在@use的文档中

标签： css sass

【解决方案1】：

@use 只是supported 由dart-sass 组成。当您使用 node-sass 时，这对您不起作用。您必须改用@import。

【讨论】：

【解决方案2】：

感谢 Gh05d（我将他的回答标记为有用）我找到了文档并安装了“dart”。 npm install --save-dev sass 并在我的 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 */

【讨论】：