导入样式表与 HTML 中链接相比的优点？

Question

CSS import 关键字是否会在对链接样式表的单个请求期间通过本地访问或在 Web 服务器上获取导入的样式表来阻止其他服务器请求？或者它主要是为了模块化，提供单点修改（链接样式表）？

Answer 1

我认为你可能在这里混淆了一些不同的东西。

在 Sass/SCSS 中，

@import

用于向 Sass 文件/上下文添加其他编程资源和/或将其他样式捆绑在一起。这一切都是在编译时完成的，因此将有一个捆绑文件传递到浏览器，无需额外的 HTTP 调用（对于 CSS）。来自 Sass

@import

参考页面：

Sass 扩展了 CSS 的

@import

规则，能够导入 Sass 和 CSS 样式表，提供对 mixins、函数和变量的访问，并将多个样式表的 CSS 组合在一起。与普通 CSS 导入（需要浏览器在渲染页面时发出多个 HTTP 请求）不同，Sass 导入完全在编译期间处理。

（此外，它已被弃用并计划删除，旨在由

@use

规则取代。）

在 CSS 中，

@import

的行为是根据需要发出额外的 HTTP 请求来异步获取和加载额外的 CSS 文件。来自 MDN CSS

@import

参考：

@import

CSS at-rule 用于从其他样式表导入样式规则。 ... 为了使用户代理可以避免检索不支持的媒体类型的资源，作者可以指定依赖于媒体的

@import

规则。这些条件导入在 URL 后指定以逗号分隔的媒体查询。在没有任何媒体查询的情况下，导入是无条件的。指定所有介质具有相同的效果。

至关重要的是，这种基于浏览器支持的动态获取只能在每个单独的浏览器中完成，而不是预编译。 根据您的问题，您写道：

...它是否可以防止单个 html 文件中存在多个链接标记？

我不确定这两个实例是否符合您的建议。我确实认为有时在开发模式下，您的捆绑过程可能会选择只注入几个

<style/>

块或

<link/>

元素，而不是捆绑所有 CSS。我认为从逻辑上讲，在 Sass 和 CSS 上下文中，

@import

在技术上正在替换或以其他方式阻止添加多个

<link/>

元素的需要，但这有点简化了它们的使用方式/原因。