问题标签 [dart-sass]

当我尝试在 laravel 版本 8 上编译引导脚手架时，出现以下错误

有人可以帮忙解决这个问题吗？谢谢

我正在开发一个使用vue.js 2.6、bootstrap-vue 2.8、sass 1.34 (dart-sass) 作为预处理器和 sass-loader 10.2 构建的 SPA 应用程序。

随着项目变得越来越大，我们已经从 Node-Sass 切换到 Dart-Sass（因为 node-sass 已被弃用）。

不幸的是，我们现在在构建或开发项目时遇到性能问题，因为现在创建一个新构建大约需要 15 分钟，而且我们经常在开发中遇到高内存使用情况。

阅读这篇文章后，我发现使用speed-measure-webpack-plugin 95% 的编译时间是由于 css 编译目的，因为大多数 SMP 堆栈跟踪包含这样几个条目：

删除主 app.scss 文件上的引导导入确实可以提高性能，并且完全删除 sass 编译可以节省 95% 的时间。

在 dart-sass Github 上阅读此页面，我了解到 dart Sass 原生可执行文件比 node.js 版本上的 dart sass 更强大。

这是我的vue.config.js：

如果我很好理解的话，在编译期间使用 Node.js 上的 Dart Sass 配置。

我已经从这个页面设置了 dart-sass 独立版本，我可以在命令行上执行它，但我实际上不知道是否可以在 webpack 编译而不是 Node.js 版本中运行它？我搜索了 vue.js、webpack 和 sass-loader 文档，但没有成功。

编辑：

@import "@/assets/scss/app.scss";这篇文章中描述的编译时间问题是由于在 additionalData (additionalData: )中导入了一个包含整个应用程序 css 的文件。我们这样做是为了在几个组件中使用 Bootstrap 变量，但这显然不是一个好方法。如果您希望在 vue 组件中使用引导变量，最好的选择可能是在每个需要它的组件上导入包含自定义和引导变量的文件，例如：

我有一个第三方 SCSS 文件包含在我的项目中，结果 Dart SASS 显示一长串警告。如何禁用第三方包含的警告？

我将 Vue 与 Dart SCSS 一起使用。Dart 有一个 quietDeps 选项，但我不确定我是否以正确的方式使用它。

我从一个我必须覆盖的微软报告页面中获得了这个 ID。在我将 gulp-sass 包更改为 gulp-dart-sass 之前，它从来没有给我任何问题。

我无法控制生成的 ID。 #1_ReportViewerN2_ctl09_ctl00_CurrentPage

有办法解决吗？

https://www.sassmeister.com/gist/b61f6646765870a79017170f0ff7c302?token=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&scope=gist,read:user

我想vue用 dart-sass 创建新的应用程序。

众所周知，dart-sass 有两种选择：

1. Dart-Sass 开启Dart-VM
2. Dart-Sass 上NPM是纯 JS 编译版本

我的问题是如何通过 dart-vm 编译样式？它是默认的吗？如果没有，如何将 dart-vm 集成到 vue 应用程序中？

我正在将代码库从使用迁移@import到@use和@forward。大部分都可以，但我不确定在@import使用 with的情况下该怎么做@content。

考虑到以下混合，唯一的目标是将样式包装在一个类中：

然后使用 mixin@import将所有这些样式包装在 a 中.parent-class：

我认为用 a 替换它是@forward行不通的，但无论如何都要尝试一下：

这引发了以下错误：

我发现该sass-migration工具以这种方式解决了这个问题：

这些components.scss文件有多个@forward语句将所有组件引用保存在一个地方，如下所示：

sass 编译器运行后会产生一个空块：

有什么方法可以实现将一堆样式包装在一个支持@useand@forward规则的类中？

我正在使用 node-sass，现在才开始使用 dart sass，我想问一下如何将文件夹编译并监视到单个文件？

我在 package.json 的脚本中使用了这个命令并且工作：

但现在在我安装 sass 并卸载 node-sass 之后，我正在使用：

请任何帮助将不胜感激。

我有一个文件夹，用于存储项目的所有变量和函数。由其自己的文件中的功能分隔，并强烈使用命名空间。

现在，可能是因为对 dart-sass 缺乏了解，我不得不在每次需要时使用 @use 导入所有这些文件。

索引.scss

所以我的问题是：有没有办法通过单个@use 获得相同的功能？ 我认为这样的事情会起作用，但似乎@forward 不接受名称空间，只接受前缀。

// 下面的不行，不要尝试。我只是想展示我想要实现的目标

核心/_index.scss

索引.scss

我正在使用 VueJS 3、sass-loader (dart-sass) 10.2.0，我只有两个文件（位于同一个文件夹中） - vue 组件和 .scss 文件，其中包含变量列表和一些调试样式规则。问题是它奇怪地导入：类选择器不起作用，* 选择器起作用，但如果我使用变量 - 它就变成了一个字符串。这是我的文件中的内容：

主文件

按钮.vue

这就是它在 devtools 中的样子

注意：我使用旧版本的 sass-loader 因为它在默认版本中抛出奇怪的错误。我还尝试了 10.2.0 和 7.1.0 版本的 sass-loader。

该项目使用 node-sass，但我想切换到 dart-sass，因为 node-sass 已被弃用。

如果我卸载 node-sass 并安装 sass，我会收到以下错误：

如果我卸载 node-sass 并在 node-sass 包装器中安装 sass (npm install --save-dev node-sass@npm:sass)，项目编译成功。安装纯 sass 的方法是什么？

所以目标是在 devDependencies 中有 "sass": "^1.38.0" 而不是 "node-sass": "npm:sass@^1.38.0"