Live Sass 编译器 - @use 导致编译错误

2023-12-02

我在用着Live Sass 编译器 v3.0.0在我的 VS Code 中,每当我使用@use rule从另一个文件导入变量。但是,当我使用 Sass 命令行界面时(sass --watch)编译我的文件,它会抛出没有错误.

因此,我想问一下这是由于我的代码中的语法错误还是Live Sass编译器的错误引起的。

重现步骤

文件结构和代码

这是名为的文件夹的文件结构sass-test我在 VS Code 中打开的:

sass-test
|   style.scss
|   _variables.scss

样式.scss

@use "variables";

html {
  color: variables.$primaryColor;
}

_变量.scss

$primaryColor: #ff0000;

Live Sass 编译器输出

Open style.scss在 VS Code 的新选项卡中。然后,单击窗口右下角的“Watch Sass”按钮。 Live Sass 编译器会输出以下错误:

Compiling Sass/Scss Files: 
d:\Web Development\sass-test\style.scss
--------------------
Compilation Error
Error: Invalid CSS after "  color: variables": expected expression (e.g. 1px, bold), was ".$primaryColor;"
        on line 4 of sass/d:\Web Development\sass-test\style.scss
>>   color: variables.$primaryColor;
   ------------------^

--------------------
Watching...
-------------------

Sass CLI 输出

打开终端并运行sass --watch style.scss:style.css。编译器编译成功,没有任何错误:

将 style.scss 编译为 style.css。

Sass 正在观察变化。按 Ctrl-C 停止。

既然我的代码可以使用 Sass CLI 成功编译,这是否意味着我的代码在语法上是正确的并且是由 Live Sass 编译器扩展中的错误引起的?


两天前我遇到了相同/类似的问题。

@use 是新的官方版本“Dart Sass”中引入的新指令,取代了现已弃用的“@import”。

VS Code 中流行的扩展“Live Sass Compiler”一段时间以来不再受到维护者的支持。所以不幸的是 Sass 版本没有在该扩展中更新......

在“Dart Sass”的 VS Code 中,我找到了扩展“DartJS Sass Compiler”:
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

实际上我只是做了一个快速测试,所以我无法报告太多。但乍一看,它运行良好。但由于它是另一个扩展,您可能需要更改一些设置。

UPDATE

除了上述报告的扩展之外DartJS Sass Compiler使用实际的 SASS 版本,我发现了一个实际且实际维护的分支Live Sass Compiler。它已深深隐藏在搜索结果中。因为它是 VS Code 中非常流行的扩展,这里是分支的链接:

https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

Remark:

我玩过这两个扩展。两者都做得很好并且各有优势。

“DartJS Sass Compiler”还可以提供更详细的输出,例如有关 sass 版本和观察者的信息。除了包含的 SASS 版本之外,如果安装到您的系统或项目本地,它还允许使用您自己的 SASS 版本。因此,对维护者的更新没有/更少的依赖。

“Live Sass Compiler”开箱即用,包含 sass 版本。由于它是 VS Code 中非常流行的扩展,因此有一个特殊的优点:它似乎可以让旧项目中的设置保持运行。

我认为两者都是很好的解决方案。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Live Sass 编译器 - @use 导致编译错误 的相关文章

随机推荐

  • Android 的基本组件的类加载和_java对象_生命周期

    虽然从 API 角度来看 关于应用程序 活动等生命周期的资源有无数 onCreate Destroy Whatnot 方法 几乎没有任何关于这些组件的实际对象生命周期的信息从Java的角度来看 例如 我 在 YouTube marakana
  • 使 Adob​​e 字体在 IE9 中与 CSS3 @font-face 配合使用

    我正在构建一个小型 Intranet 应用程序 并尝试使用 但没有运气Adobe字体我最近购买了 据我所知 在我们的案例中 这并不违反许可证 我将 ttf otf 版本的字体转换为 woff eot 和 svg 以便针对所有主要浏览器 我使
  • 如何动态更改 JXTreeTable 中特定单元格的颜色

    我在用JXTreeTable现在为了制作树表结构 我想动态更改特定单元格的颜色 如何改变单元格的颜色 我发现这段代码可以改变颜色 但这不起作用 这是代码 leftTree setDefaultRenderer Object class ne
  • 在Python中获取或构建PEM证书链

    是否可以使用 ssl 和 Python 获取 PEM 格式的整个证书链 我可以通过以下方式获得具体的 import ssl addr 192 0 2 1 cert str ssl get server certificate addr 44
  • Python - TypeError:listen() 缺少 1 个必需的位置参数:'self'

    我一直在 PyCharm 中开发 AI 但我似乎在尝试调用方法来尝试获取音频输入时遇到了 voice recognition 错误 Users waynedeng Desktop AI venv bin python Users wayne
  • 如何将新的用户控件添加到工具箱或新的 Winform?

    我有一个现有的库 不是 Winforms 应用程序 它为真正的 Windows 应用程序提供一些 Winforms 在这个库中 我想创建一个用户控件来将一些控件分组在一起 为了实现这一目标 我右键单击 添加 用户控制并将一些控件拖到新的用户
  • 在 Sublime Text 构建系统中使用自定义变量

    我正在 macOS 上配置 Sublime Text ST 构建系统 我想创建一个构建系统变体 将构建产品输出到我的用户库中的文件夹 但我找不到解决该目录的方法 The ST 构建系统文档提到构建系统变量的可用性 但它们都不允许我寻址我的主
  • 集合视图,具有自定义布局,单元格在滚动时行为异常

    我正在尝试使用 UICollectionView 创建自定义平铺布局 一旦我运行我的应用程序 它就会在模拟器中完美呈现 但是当我滚动视图并将其带回时 所有单元格的框架都会发生变化 并且单元格会重叠 随机留下空格 过去两天我无法解决这个问题
  • 如何在“CollectionEditor”对话框中启用属性的默认值

    请先阅读整个问题以理解where我将能够重置属性的默认值 当定义一个可以可视化设计的自定义类时 可以实现一个集合编辑器来修改列表 数组 集合等属性 使用以下模式 Editor typeof CollectionEditor typeof U
  • 使用 Microsoft Jet OLEDB 的 CSV 列限制

    我正在从包含大约 350 列的 CSV 导入数据 这个 CSV 导入是固定的 我完全无法控制它 如果我尝试在 Excel 2003 中打开 CSV 由于列限制为 255 IV 它只能部分加载 当我使用 OleDb 和 Microsoft J
  • Python 挑战字符串编码

    我有以下提供者列表 俄语 providers u u041e u041e u041e u041a u0432 u0430 u0440 u0442 u0430 u043b u041b u0435 u043e u043f u043e u043b
  • 如何在 Spring.NET 中配置静态类的属性?

    如何通过 Spring NET 配置静态类 考虑下面的类 static class Abc public Interface xyz get set public void Show xyz show 也许解决方法可以帮助 这不是一个静态类
  • OpenCV imwrite 函数导致“未定义符号”

    我正在开发一个软件 它由一些带有 python 绑定的核心 C 代码组成 C 代码已经使用了大量 OpenCV 但现在我试图在两者之间保存图像 但我似乎无法使用imwrite功能 将其添加到 main cpp 中并使用 默认 构建在 ecl
  • 如何使用表单名称作为字符串创建新的表单实例

    使用表单名称创建封闭表单的新表单实例的代码 我想用变量替换长的选择案例列表 模块完整代码 在 Access 2010 中 我有一个 VBA 函数 当给定包含表单名称的字符串时 该函数会打开表单的新实例 通过将表单变量 frm 添加到集合中
  • 图片在浏览器中显示为垃圾字符

    谁能告诉我为什么当我尝试通过浏览器访问图像 URL 时 它显示一堆内容类型为文本 纯文本的垃圾字符 eg https www domainname com client image name jpg显示如下 3 1AQa q2 B R b3
  • 如何使用 php 将文件添加到 ziparchive 中新创建的文件夹中?

    如上图所示 我有组织在虚拟文件夹中的图像 在 mysql 数据库中 但不是真实文件夹中 我需要使所选文件夹可供使用下载为 zip 文件 我能够压缩图像 但是我们如何添加子目录以便向其中添加图像 我尝试使用addEmptyDir 但无法找到向
  • 当条码扫描仪发送以换行符结尾的数据时如何使按钮散焦

    我正在编写一个 C 条形码应用程序 我有一个 EAN 13 正则表达式来检测 Form1 KeyPress 函数中的条形码 我没有机制来检测输入来自哪里 这是我的问题 我的表单中有一个重置按钮 可以清除 dataGridView 中列出的所
  • 无法全局安装旧版本的 phpunit phar

    正如给出的https phpunit de manual current en installation html installation phar verification 全局安装PHAR的步骤是 wget https phar ph
  • DLIB:针对 194 个地标训练 Shape_predictor(helen 数据集)

    我正在训练DLIB s 形状预测器对于 194 个面部特征点 使用海伦数据集用于通过以下方式检测人脸特征点face landmark detection ex cppdlib 库 现在它给了我一个sp dat大约的二进制文件45 MB与给定
  • Live Sass 编译器 - @use 导致编译错误

    我在用着Live Sass 编译器 v3 0 0在我的 VS Code 中 每当我使用 use rule从另一个文件导入变量 但是 当我使用 Sass 命令行界面时 sass watch 编译我的文件 它会抛出没有错误 因此 我想问一下这是