Sass @use未加载部分 [英] Sass @use not loading partial

问题描述

我正在尝试导入一个sass部分（ _variables.scss ）以用于我的主样式表（ global.scss ），但我不断收到 Error：未定义变量。进行sass编译。

I'm trying to import a sass partial (_variables.scss) to use in my main stylesheet (global.scss), but I keep getting the Error: Undefined variable. on sass compiling.

目录结构：

app
└─public
  └─styles
    │  global.css (output for sass compiling is here).
    └─sass
      └─_variables.scss
      └─global.scss

_variables.scss

_variables.scss

$font-text: 'lato', sans-serif;

global.scss

global.scss

@use '_variables';

body {
  font-family: $font-text;
}

查看 Sass文档，我知道使用 @use 而不是 @import （起作用），因为他们正在逐步淘汰它。

Looking at the Sass documentation, I understand to use @use instead of @import (which works) because they are phasing it out.

我在这里做什么错了？谢谢。

What am I doing wrong here? Thanks.

推荐答案

这是因为您没有使用支持此功能的Dart Sass。

That's because you are not using Dart Sass which supports this feature.

也可以在文档中找到：

仅Dart Sass当前支持@use。其他实现的用户必须改用@import规则。

Only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.

因此请使用 @import 直到支持 @use 。

BTW，如果要使用Dart Sass，只需使用 sass 而不是 node-sass ，并在webpack配置中要求它，例如：

BTW, If you want to use Dart Sass, just use sass instead of node-sass and require it in the webpack config, like:

// ...
{
  loader: 'sass-loader',
  options: {
    implementation: require('sass')
  }
}
// ...

这篇关于Sass @use未加载部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！