您的当前位置:首页正文

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

2024-11-13 来源:个人技术集锦
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

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

在大多数情况下,等待库维护者更新是最简单和最安全的方法。同时,您也可以考虑在您的项目中逐步迁移到使用 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

Top