如何使用Sass的@use模块系统?

如何使用Sass的@use模块系统?,sass,module,scss-mixins,Sass,Module,Scss Mixins,每当我尝试从MediaQueries.scss添加mixin或var时,它告诉我它无法识别它们,它们在同一个文件夹中,我仔细检查了vars和mixin名称 tast.scss: $var: 200px; @mixin blue { color: blue; } test.scss: @use 'tast.scss'; .a { width: $var; // undefined variable width: tast.$var; // expected express

每当我尝试从MediaQueries.scss添加mixin或var时,它告诉我它无法识别它们,它们在同一个文件夹中,我仔细检查了vars和mixin名称

tast.scss:

$var: 200px;
@mixin blue {
    color: blue;
}
test.scss:

@use 'tast.scss';
.a {
    width: $var; // undefined variable
    width: tast.$var; // expected expression, was ".var;"
    @include blue; // no mixin named blue
    @include tast.blue; // expected "}", was ".blue;"
}
*如果我使用此选项,则会导致相同的错误:

 @use 'tast';

无论何时导入文件或模块,Sass都不需要任何文件扩展名。使用
@使用“tast”
而不是
@使用'tast.scss'


以下是导入文件或模块时。

Sass不需要任何文件扩展名。使用
@使用“tast”
而不是
@使用'tast.scss'


以下是.

由于新的
@use
语法仅由Dart Sass支持,VS代码的Watch Sass扩展不支持它(我不知道它是否会支持),因为它使用的是SassJS的一个版本,而且非常旧

相反,您应该能够使用
npm install-g Sass
在您的计算机上直接安装Sass。这将安装Sass的Dart风格

一旦安装并在您的路径上可用,您就可以使用脚本监视Sass文件或整个目录,并在进行更改时进行编译

"scripts": {
  // watch a single file
  "sass:watch": "sass --watch input.scss output.css",

  // watch a directory 
  "sass:watch": "sass --watch src/sass:build/styles"
}

由于新的
@use
语法仅由Dart Sass支持,VS代码的Watch Sass扩展不支持它(我不知道它是否会支持),因为它使用了一个版本的SassJS,而且是一个相当旧的版本

相反,您应该能够使用
npm install-g Sass
在您的计算机上直接安装Sass。这将安装Sass的Dart风格

一旦安装并在您的路径上可用,您就可以使用脚本监视Sass文件或整个目录,并在进行更改时进行编译

"scripts": {
  // watch a single file
  "sass:watch": "sass --watch input.scss output.css",

  // watch a directory 
  "sass:watch": "sass --watch src/sass:build/styles"
}


即使没有扩展,它也会调用这些错误,不管我如何使用@use。还有其他想法吗?即使没有扩展,它也会调用这些错误,不管我如何使用@use。还有别的主意吗?你是在用飞镖吗
@use
仅在Dart Sass中受支持,因为
1.23.0
,没有其他实现支持它。哇,我不知道。。。嗯,有什么替代方法吗?对于vscode扩展。您所说的vscode扩展的替换方法是什么意思?您是通过扩展还是通过命令行/构建脚本编译Sass?通过Watch Sass扩展,我指的是不同的编译过程,即:different扩展或编译器(vscode外部)。明白了。让我们看看我能不能帮你:)你在用飞镖吗
@use
仅在Dart Sass中受支持,因为
1.23.0
,没有其他实现支持它。哇,我不知道。。。嗯,有什么替代方法吗?对于vscode扩展。您所说的vscode扩展的替换方法是什么意思?您是通过扩展还是通过命令行/构建脚本编译Sass?通过Watch Sass扩展,我指的是不同的编译过程,即:different扩展或编译器(vscode外部)。明白了。让我们看看我是否可以帮助您:)这可以在vscode中使用吗?你能链接这篇文章的任何教程吗?我对web开发和包管理还很陌生。非常感谢。这将在项目中设置为npm脚本。应该准备好你需要的一切。由于您需要dart sass,只需将步骤3更改为运行
npm install sass
,然后将步骤4更改为使用
sass
,而不是
node sass
,我真的非常感谢您,我为这个问题绞尽脑汁已经一个多月了!这可以用在vscode中吗?你能链接这篇文章的任何教程吗?我对web开发和包管理还很陌生。非常感谢。这将在项目中设置为npm脚本。应该准备好你需要的一切。由于您需要dart sass,只需将步骤3更改为运行
npm install sass
,然后将步骤4更改为使用
sass
,而不是
node sass
,我真的非常感谢您,我为这个问题绞尽脑汁已经一个多月了!