uniapp开发小程序使用ts+vue3使用uview-plus遇到的sass不适配问题

node_modules\uview-plus\components\u-icon\u-icon.vue 80:10  root stylesheet
10:54:52.885 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
10:54:52.885 More info and automated migrator: https://sass-lang.com/d/import
10:54:52.885   ╷
10:54:52.885 1 │ @import "./mixin.scss";
10:54:52.885   │         ^^^^^^^^^^^^^^
10:54:52.885   ╵
10:54:52.885     node_modules\uview-plus\libs\css\components.scss 1:9           @import
10:54:52.885     node_modules\uview-plus\components\u-button\u-button.vue 80:9  root stylesheet
10:54:53.011 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
10:54:53.011 More info and automated migrator: https://sass-lang.com/d/import
10:54:53.011   ╷
10:54:53.011 1 │ @import "./mixin.scss";
10:54:53.011   │         ^^^^^^^^^^^^^^
10:54:53.011   ╵
10:54:53.011     node_modules\uview-plus\libs\css\components.scss 1:9                        @import
10:54:53.011     node_modules\uview-plus\components\u-loading-icon\u-loading-icon.vue 80:10  root stylesheet
10:54:53.059 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
10:54:53.059 More info and automated migrator: https://sass-lang.com/d/import
10:54:53.059   ╷
10:54:53.059 1 │ @import "./mixin.scss";
10:54:53.059   │         ^^^^^^^^^^^^^^
10:54:53.060   ╵
10:54:53.060     node_modules\uview-plus\libs\css\components.scss 1:9        @import
10:54:53.060     node_modules\uview-plus\components\u-icon\u-icon.vue 80:10  root stylesheet

从您提供的日志信息来看，

uview-plus

库中的多个组件正在使用 Sass 的

@import

规则，而这些规则在 Dart Sass 的未来版本中将被弃用。由于这些警告来自

node_modules

目录下的文件，这意味着它们是第三方库的一部分，而不是您自己的代码。

处理这种情况有几种方法：

1. 等待库更新： 最简单的方法是等待 uview-plus 库的维护者更新库以使用新的 Sass 语法。一旦他们发布了更新，您可以通过更新您的 node_modules 来获取这些更改。
2. 联系库维护者： 如果您急需解决这个问题，可以尝试联系 uview-plus 的维护者，询问他们是否有计划更新库以支持新的 Sass 语法，或者是否可以提供一个临时的修复方案。
3. 自行修改： 如果您对 Sass 和 uview-plus 的源代码有足够的了解，您可以尝试自行修改 node_modules 中的文件。但是，这种方法有风险，因为当您下次运行 npm install 或 yarn 时，这些更改可能会被覆盖。此外，直接修改 node_modules 中的文件通常不是最佳实践，因为它会使您的项目难以维护和升级。
4. 使用旧版本的 Sass： 作为临时解决方案，您可以考虑继续使用旧版本的 Sass，直到 uview-plus 库更新为止。但是，这可能会使您错过 Sass 新版本中的功能和性能改进。
5. 分叉库并自行维护： 如果您对 uview-plus 库有深入的了解，并且愿意承担维护责任，您可以考虑分叉该库并在您自己的版本中进行必要的更新。然后，您可以将这个分叉的版本作为您项目的依赖项。
6. 忽略警告： 虽然这不是一个解决问题的长久之计，但如果您确定这些警告不会影响您的项目功能，并且您愿意接受在 Dart Sass 更新到移除 @import 规则的版本时可能会遇到的问题，您可以选择忽略这些警告。

在大多数情况下，等待库维护者更新是最简单和最安全的方法。同时，您也可以考虑在您的项目中逐步迁移到使用 Dart Sass 支持的新语法和功能，以便在库更新时更容易地进行集成。

Sass官网的概述

重大变更：“@import”和全局内置函数

最初，Sass 使用规则来加载具有单个全局命名空间的其他文件，所有内置函数也可以全局使用。我们现在弃用了 Sass 规则和全局内置函数，因为模块系统（和规则）已经可用了几年。

@import

@import

@use

@forward

@import

导致许多问题，需要手动将 Sass 成员 namespaced 以避免冲突，当同一文件 多次进口，对人类和工具都非常困难 来判断给定的变量、mixin 或 function 的来源。

模块系统解决了这些问题，并使 Sass 的模块化达到了标准。 与其他现代语言的最佳实践一起使用，但我们无法获得完整的 它的好处，同时保留在语言中。

@import

@import

从 Dart Sass 1.80.0 开始被弃用。此外，我们还 弃用可用的 Sass 内置函数的全局版本 在模块中。

sass:

过渡期过渡期永久链接

Sass 规则和全局内置函数调用现在会发出弃用 警告。虽然 Dart Sass 2.0.0 即将发布，但会有各种更小的 重大更改，我们不希望删除 Sass 规则或全局 内置函数，直到 Dart Sass 3.0.0，该版本将不早于 Dart Sass 1.80.0 两年后。

@import

@import

最终，所有规则都将被视为纯 CSS @import 可能在中间时期之后，任何曾经是 Sass 的东西都会抛出错误。

@import

@import

自动迁移自动迁移永久链接

您可以使用 Sass 迁移器将样式表自动更新为 使用 Module System。

<span style="background-color:#ffffff"><span style="color:#6b717f"><span style="color:var(--sl-color--code-text)"><span style="background-color:var(--sl-color--code-background)"><code class="language-shellsession"><span style="color:var(--sl-color--code-text)"><span style="color:var(--sl-color--code-text)">$</span> <span style="color:var(--sl-color--code-text)"><span style="color:var(--sl-color--code-text)">npm</span> <span style="color:var(--sl-color--code-text)">install</span> <span style="color:var(--sl-color--code-text)">-g</span> sass-migrator</span></span>
<span style="color:var(--sl-color--code-text)"><span style="color:var(--sl-color--code-text)">$</span> <span style="color:var(--sl-color--code-text)">sass-migrator module --migrate-deps your-entrypoint.scss</span></span></code></span></span></span></span>

如果您想从全局内置函数迁移，但尚未迁移 准备好完全迁移规则，您可以传递标志以迁移函数，同时保持规则不变。

@import

--builtin-only

@import

我可以将警告静音吗？我可以将警告静音吗？ 永久链接

Sass 提供了一套强大的选项来管理哪些弃用 您看到的警告以及何时看到。

简洁和详细模式简洁和详细模式永久链接

默认情况下，Sass 以简洁模式运行，它只会打印每种类型的 deprecation warning 五次，然后静默其他警告。这 帮助确保用户知道何时需要注意即将发生的突发事件 更改而不会产生大量的控制台噪音。

如果你以详细模式运行 Sass，它将打印所有弃用 警告。这对于跟踪剩余工作非常有用 done 在修复弃用时完成。您可以使用 命令行上的 --verbose 标志，或者 JavaScript API 中的 verbose 选项。

⚠️ 小心！

从 JS API 运行时，Sass 不会在 编译，因此默认情况下，它将为每个编译的样式表打印 5 个警告。但是，您可以通过编写（或询问 你最喜欢的框架的 Sass 插件编写）一个自定义 Logger，它只有 每个弃用打印 5 个错误，并且可以在多个编译之间共享。

在依赖项中抑制弃用在依赖项中静默弃用永久链接

有时，您的依赖项会发出您无法执行的弃用警告 关于什么。您可以静默来自依赖项的弃用警告，同时 仍在使用 命令行上的 --quiet-deps 标志，或者 JavaScript API 中的 quietDeps 选项。

对于这个标志，“依赖项”是任何样式表，而不仅仅是 来自 EntryPoint 样式表的一系列相对加载。这意味着任何事情 这来自加载路径，大多数样式表都是通过自定义导入器加载的。

静默特定弃用静默特定弃用永久链接

如果您知道某个特定的弃用对您来说不是问题，则可以 silence 警告 命令行上的 --silence-deprecation 标志，或者 silenceDeprecations 选项。

注意：当 和 global built-ins 的弃用 一起发布，我们预计这两项功能将同时被移除 以及（在 Dart Sass 3.0.0 中），它们被视为 API 的用途。如果您希望将两个弃用警告都静音 和全局内置弃用警告，您需要将 and 都传递给 /。

@import

@import

import

global-builtin

--silence-deprecation

silenceDeprecations