我可以使用 sass 导入外部托管的文件吗？

Posted 2023-03-06

【中文标题】我可以使用 sass 导入外部托管的文件吗？

【英文标题】：Can I import an externally hosted file with sass?

【发布时间】：2013-06-01 14:10:27

【问题描述】：

使用 Sass (SCSS) / Compass，是否可以将一些 CSS/SCSS 从外部托管文件导入到您的代码中？

我在 CDN 上托管一个 jQuery 插件，并希望将 CSS 保留在同一位置，这样我就不会丢失它。但是，我还希望能够将 CSS 拉入我的代码并让它在我的主 CSS 中编译，而不是在我的 html 中拉入额外的 CSS 文件。这可能吗？

【参考方案1】：

对于那些来这里寻找将 CDN 导入为 sass 的方法的人 @import 我在这里找到了答案：https://github.com/webpack-contrib/sass-loader/issues/246

这就是你的做法（以引导程序为例）：

styles.scss

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css);

【参考方案2】：

Sass 不会从远程位置编译任何文件，所有文件都必须可以从文件系统（本地硬盘、共享网络驱动器、挂载驱动器等）访问。

Sass 也根本不编译 CSS 文件。 https://github.com/nex3/sass/issues/556

@import "my.css";

编译为

@import "my.css";

也许您可能对Compass extensions 感兴趣？

【讨论】：

您的答案与问题无关。他问他是否可以在 Sass 中使用外部托管的 CSS 文件，而不是本地 CSS 文件。我很确定 Sass 无论如何都不会将 CSS 文件编译到其输出文件中，这是设计使然。

@Ghodmode 也许您应该重新阅读这个问题：“我还希望能够将 CSS 提取到我的代码中并让它在我的主 CSS 中编译”。我不知道还能如何解释。文件的位置无关紧要，因为您得到相同的结果。目前，Sass 没有按照要求执行。

@cimmanon 您的评论不太正确。 Sass 会将 .scss 文件直接导入到目标文件中，即它会像您在该文件中直接写入导入的内容一样进行编译。但是，导入的 .css 文件、url()s 或任何以 http:// 开头的导入都将编译为 @import。这意味着您仍有可能试图消除的额外 HTTP 请求。位置很重要。

@LogicArtist 这不是我说的吗？导入的 CSS 文件根本不会编译到文件中。 CSS 文件是本地的还是远程的无关紧要：结果是相同的（在编译结果中您会得到一个标准的 CSS @import 语句）。 Remote Sass 文件也不会编译到文件中。

好吧，我没有看到指定 Ruby-Sass 的 OP，我没有看到您明确表示您的答案集中在 Ruby-Sass 上，我不太确定是否可以将 Ruby-Sass 视为关于 Sass 的某种规范标准。我什至会把钱花在 libsass 比 ruby​​-sass 更频繁地使用上，也许使它成为事实上的标准？

【参考方案3】：

你当然可以。在这种情况下，它的工作原理与标准 CSS @import 规则完全相同。只需给它一个指向 CDN 托管的 CSS 文件的 URL。

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import

【讨论】：

我是否遗漏了什么，或者您的链接是否明确表示不可能？

Sass 扩展了 CSS @import 规则以允许它导入 SCSS 和 Sass 文件。所有导入的 SCSS 和 Sass 文件将合并到一个 CSS 输出文件中。此外，导入文件中定义的任何变量或mixin都可以在主文件中使用。

"而@import "http://foo.com/bar"; 将编译为@import "http://foo.com/bar";"。如果您导入外部托管的 Sass/SCSs 文件，则导入将被编译为最终结果，就好像它是 CSS 导入一样。

【参考方案4】：

是的，您可以使用PostCSS Import URL Plugin 导入外部 css 文件。它会将外部 CSS 拉入您的代码中，因此您可以在主 CSS 中编译它。

【参考方案5】：

  @import url("http://fonts.googleapis.com/css?family=#$family");

导入以 .css 结尾的 URL。

@import "theme.css";

导入 URL 以 http:// 或 https:// 开头的位置。

@import "http://fonts.googleapis.com/css?family=Droid+Sans";

将 URL 写入为 url() 的位置。

@import url(theme);

具有媒体查询的导入。

@import "landscape" 屏幕和（方向：横向）；