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

最新推荐文章于 2025-06-13 14:39:52 发布

开发者小天

最新推荐文章于 2025-06-13 14:39:52 发布

阅读量3.1k

点赞数 43

CC 4.0 BY-SA版权

文章标签： uni-app 小程序 sass

本文链接：https://blog.youkuaiyun.com/liyuxiaomeng/article/details/143143564

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 目录下的文件，这意味着它们是第三方库的一部分，而不是您自己的代码。

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

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