问题标签 [dart-sass]

我已经像这样导入了 boostra5 scss https://www.npmjs.com/package/bootstrap：

一切都很好，它编译。我正在使用 dart sass 版本并想使用 @use 而不是 @import。

因此，根据文档，我使用 @use 关键字并在最后使用“as *”省略命名空间。

但是我有一个错误说@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");这意味着样式表没有正确导入。

您知道在这种情况下如何使用 @use 而不是 @import 吗？谢谢！

给定以下地图：

如何创建新地图，其中键#{$key}-light和值例如结果ligthen($value, 20%)：

预期结果：

在javascript中它会是这样的：

在 C# 中它将是：

一段时间以来，SASS 中的颜色算法已被弃用，并且在该工具的较新版本中不可用。我目前正在迁移一个具有颜色算术的旧项目。

例如，较旧的 scss 文件具有以下内容：

$body-bg-color-dark-light是一个简单的 RGB 值（如#FF1100）

使用新的 SASS 颜色函数来重现与上述完全相同的功能的替代方法是什么？请注意，我们添加的是一个简单的整数而不是百分比。

我尝试过的替代方法是：

这不会产生所需的颜色。此外，由于lighten只darken接受百分比，因此我对大于100我正在迁移的代码库中的值感到困惑。

另一个问题是我无法获得旧版本的 SASS（或为此找到哪个版本）来确定通过简单地将整数添加到颜色来准确生成什么，以便我可以应用新的颜色函数来生成同样的结果。

编辑：

我设法挖掘了该 SCSS 的旧编译版本。该样本中的一个原始值是#020507。

再加10上产生的结果#0c0f11。看起来它正在向每个颜色通道添加10（或十六进制）。A

我尝试用我自己的值覆盖一些默认变量。

为此，我使用了 Bootstrap 文档中的演示代码：

覆盖适用于$body-bgand $body-color。但更改$table-cell-vertical-align没有任何效果。

我还看到了一个答案，它指出了订单的重要性。但正如我所见，我文件中的顺序是正确的。

即使我把它放在$table-cell-vertical-align文件的末尾，它也不起作用。

我错过了什么吗？

我将我的应用程序升级到 Angular 12.2.5

一切都比较顺利，更新后我能够为我的应用程序提供服务。

但是，当我运行 ng test 时，出现以下错误：

它看起来来自 Karma-scss-preprocessor，特别是在他们的源代码中，我发现

我的理解是 Angular 12 是为使用新的 sass 实现（dart-sass）而不是 node-sass 而构建的。至少这就是我更新并删除 node-sass 时错误所说的内容。

我已经尝试寻找其他 scss 预处理器插件，但是所有项目都被放弃并且有一段时间没有更新。

有没有人能够解决这个问题？我需要更改某种配置设置吗？

这是我的 Karma 配置：

到目前为止，我尝试安装 node-sass 并且它确实开始运行，但是它破坏了实际的应用程序，因为 node-sass 无法处理新语法。我还更新了强制你使用新语法的材料，所以我不能回到 node-sass。

提前感谢您提供的任何帮助或建议！

这是我的 package.json

我想使用 Dart Sass 在选择器中导入外部文件。当我使用@use 来实现这一点时，它会导致错误。

我以前使用@import 来执行此操作，并且可以使用 node-sass。

现在我想对 Dart Sass 做同样的事情，想知道怎么做。谢谢你。

我正在尝试使用 @use 而不是 @import 将我的 _custom.scss 部分中的所有变量导入到 styles.scss sass 文件中。但是@use 并没有按照我的意图覆盖变量。怎么解决？

_custom.scss

样式.scss

我尝试了多种方法来显示背景图像，但没有任何效果，现在我的 Sass 文件也无法编译。

不再显示错误，但样式不存在，只是 html。

webpack.config：

包.json

main.scss 文件（我正在使用@use 和@forward） - 它以前工作过，所以我认为我导入文件的方式是正确的。现在 main.css 文件中显示了同样的东西，这很奇怪

和我的项目结构

项目结构

如果有人可以帮助我，那就太好了，因为它已经让我发疯了两个多星期了

谢谢！

每当我运行时，sass --watch src/sass:dist/css我都会从命令行收到此错误

错误： ("primary": #0075dd !important, "secondary": #6b7a93 !important, "sucess": #1eaf3e !important) 不是有效的 CSS 值。

$map-theme-colors-rgb: create-map($map-theme-colors, convert-to-rgb, "value") !default; ^^^^^^^^^^^^^

这是一些代码片段。

_functions.scss

_variables.scss

我希望你能帮我解决这个问题。谢谢你。

当我从bootstrap-v5文件夹运行命令 npm install --save-dev sass时，出现如下所示的错误

但是我可以使用命令npm i -g sass 全局安装 sass。我只是第一次尝试这个。而且，由于我已经在全球范围内安装了 sass，有什么方法可以将 sass 导入我的项目？