问题标签 [dart-sass]

到目前为止，我使用 Mads Kristensen 的 Web Compiler，但现在我面临编译新的 sass 命令（如 @use）或使用一些 css 计算（如

我找到了一个新的 sass 实现：Dart Sass，但在 Visual Studio 中找不到任何扩展来管理它，只有一些用于 Visual Studio 代码

Web 编译器最后一次更新是在 2018 年

我也尝试使用Sass 编译器，但得到相同的编译错误：

200px,(100% - (var(--n) - 1)*10px)/var(--n) 不是正确的最大值

即使它是纯粹的工作 css，也许它太新并且编译器无法识别它

目前唯一的方法是将该规则放入纯 css 文件中并将其与 sass 生成的 css 一起导入，但似乎不是一个好的解决方案

我一直在使用 Visual Studio 代码（学习 Web 开发）和 Live Sass 编译器来将我的 sass 文件编译成 CSS。到目前为止，这一直很好。我已经开始使用@use 而不是@import，但我读到它只适用于 dart sass。

我的问题是如何安装 dart sass 并将其设置为观看 sass 文件并编译成 CSS？

一段时间以来，我一直在使用 @import 创建以下 SCSS 文件夹结构。将 3 个部分导入 _utilities-dir.scss 等...例如，将部分添加到 _utilities-dir.scss 中。

然后我习惯使用@import 方法来创建 main.scss 文件

如何使用新的 @use 方法创建相同的输出？

我致力于选择使用 SASS 的多租户应用程序的样式。遵循最新版本指南，我开始使用@use和构建基本样式@forward。现在我想用客户的颜色和字体变量来主题化这个基础，以接收多个样式表，这些样式表可以提供给我们应用程序的不同实例。

如果我要使用 deprecated @import，我会这样：

但是有了新规则，我找不到一种简单的方法来简单地将主题特定变量提供给基本样式。我尝试使用with关键字，但事实证明我需要在模块中定义变量，而我宁愿将它们封装在另一个模块中并导入它。

在@use "../variables" as *场景中我收到此错误：

我正在寻找一个可行的解决方案，最好不要在with括号内复制粘贴所有主题变量。

在https://sass-guidelin.es/#architecture中，建议最好的做法是为网站构建类似的架构，使用partials并且只有一个名为 main.css 的 CSS 文件（唯一不会是部分的文件，因此从预处理器输出的唯一 .css ）：

我强烈怀疑，通过这种方式，只有一个很大的 main.css 文件也会包含其他页面的 css（因此，只有一个 main.css 文件要下载，但它可能会很大），其次避免冲突将非常困难（一个简单的例子，2个不同主页中的相同ID和具有不同规则的联系人）。

我的想法是构建 home.scss 和 contact.scss（没有部分）等等会更好，有两个不同的（在我的简单示例中）scss 文件将导入它们的特定部分，并且以这种方式每个页面该网站将link不同的CSS页面。

我是否完全偏离了轨道，或者我误解了指南的含义，因此我的设计理念是好的？

SCSS@forward规则支持几个不错的特性：

1. @forward './colors' show $red, $green, $blue;只会转发$red,$green和$bluefrom ./colors。./colors否则会导出的所有其他值都将被忽略。
2. @forward 'library' with ($space: 2em);将$space提供给库，覆盖库可能对$space.

我怎样才能同时使用这两者？就我而言，我正在使用include-media图书馆。我想定义一个像这样包装它的模块（稍微简化）：

这里的目标是为库提供$breakpoints它所期望的值，并且只转发media和media-contextmixins。不幸的是，该代码无法编译并出现此错误：

如果我把show子句放在子句之前，我会得到类似的结果with。

这似乎不是最理想的，但我可以想象这与两个文件一起工作：

肯定有更好的方法吗？

因此，我从 Dart-Sass 的 Github 存储库下载了 .zip 1.32.11 Windows x64 版本，并将其解压缩到 Program Files 文件夹。使用提供的步骤，我Path在System variables第 4 步中找到。那里没有PATH，最接近的是PATHTEXTand Path。我的第一个问题：我可以使用Path还是必须创建一个名为PATH. 想想Path就够了，我决定编辑 System 变量，然后按 Browse 搜索 Dart-Sass 文件夹。完成后，我转到命令提示符并输入sass -version. 结果是Sass没有被认出来。我做错什么了吗？如果是这样，我该怎么做才能解决它？

我的项目正在运行 node-sass，但我决定将其更改为 sass (dart-sass)，因为我想避免安装 python、g++ 而只是为了运行 npm install，而 node-sass 会因为 node-gyp 而强制你这样做.

所以我跑了

运行npm run build( vue-cli-service build) 工作正常，但我的持续集成在npm run test:unit( vue-cli-service test:unit) 上失败。

这是完整的错误：

我该怎么做才能修复此错误？我不想回到 node-sass。

我正在尝试做的事情：我正在尝试通过在我的 package.json 中设置一个脚本来自动将我的 scss 编译为 css。我使用 onchange 和 npm-run-all 包设置的一些监视任务并行运行此编译器。

我的 package.json 文件代码是这样的

当我对我的 scss 进行任何更改并尝试运行以下命令时

我希望我在我的 scss 上所做的更改在我的页面上可见，但他们没有。这里是完整项目的 Github 存储库，供您参考。请帮我看看我做错了什么。

从dart-sass文档中我们看到 dart-sass 有一个命令行版本并且性能更高。

我想知道我们是否可以以某种方式使用该命令行版本和现有的 webpack 设置来加快我们的构建时性能。

我可以在构建机器中安装飞镖库。但是是否有任何 webpack 插件可以利用它并使用机器依赖项来构建 sass 而不是 dart-sass npm？