css - Sass 部分导入

Question

我对 sass 编译有疑问。

当我有一个带有部分的项目_partial.scss并将其导入多个部分文件（因为它包含颜色变量）时，它将多次出现在编译的 css 中！

这很丑陋，因为相同的规则会多次“推翻”自己，这使得调试信息（铬开发工具/萤火虫）相当不可读。

我认为这一切都有解决方案。我只是在任何地方都找不到关于这个问题的任何东西。

Answer 1

解决方案是不要多次包含同一个文件，或者在您计划多次包含的文件中没有任何直接输出 CSS 的代码。如果您的变量本身在一个文件中，它们可以安全地包含在您想要的任何地方，而无需选择器重复。

Answer 2

也许这个@mixin 可以帮助你：https ://github.com/wilsonpage/sass-import-once 。

查看示例并注意重置如何仅包含在最终 CSS 中一次。

Answer 3

似乎仅仅为此，sass（以及因此，scss）现在有@use而不是@import. 来自@use 文档（重点是我的）：

最简单的@use 规则写成@use ""，它在给定的URL 加载模块。以这种方式加载的任何样式都将在编译后的 CSS 输出中仅包含一次，无论这些样式被加载了多少次。

Sass 也不鼓励进一步使用@import：

Sass 团队不鼓励继续使用 @import 规则。Sass 将在接下来的几年中逐步淘汰它，并最终将其从语言中完全删除。更喜欢@use 规则。

任何有此问题的项目都可以尝试运行模块迁移器工具并检查问题是否已解决。