我能否使用Sass导入外部托管的文件？

Question

使用Sass（SCSS）/ Compass，可以从外部托管的文件中导入一些CSS / SCSS到您的代码中吗？

我正在CDN上托管jQuery插件，并希望将CSS保留在同一位置，以便不会丢失它。但是，我还想有选项将CSS拉入我的代码中，并使其在我的主要CSS中编译，而不是在HTML中拉入额外的CSS文件。这可能吗？

- Chisos Designs

Answer 1

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

以下是如何实现（以使用Bootstrap为例）：

styles.scss

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

- RyanNerd

Answer 2

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

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

@import "my.css";

编译为

@import "my.css";

也许您会对Compass扩展感兴趣？

- cimmanon

---

你的回答与问题并没有真正相关。他问的是是否可以在Sass中使用外部托管的CSS文件，而不是任何有关本地CSS文件的内容。我相信Sass没有将CSS文件编译到其输出文件中这一设计。 - Vince

也许你应该重新阅读问题：“我也想有这个选项，能够将CSS拉入我的代码中，并使其在我的主CSS中编译”。我不知道还有其他什么解释。文件的位置是无关紧要的，因为你会得到相同的结果。目前，Sass不能完成所要求的功能。 - cimmanon

@cimmanon，您的评论并不完全正确。Sass会直接将.scss文件导入到目标文件中，也就是说，它会编译成如果您在该文件中直接编写导入的内容一样。但是，导入的.css文件、url()或任何以http://开头的导入都将编译为@import。这意味着您仍然需要额外的HTTP请求，而这可能是您想要消除的。位置确实很重要。 - Logic Artist

@LogicArtist 那不就是我说的吗？导入的CSS文件根本没有被编译到文件中。无论CSS文件是本地的还是远程的都无关紧要：结果都是一样的（在编译结果中得到一个标准的CSS @import语句）。远程Sass文件也没有被编译到文件中。 - cimmanon

嗯，我没有看到 OP 指定 Ruby-Sass，我也没有看到你明确说明你的答案是关注于 Ruby-Sass 的，而且我不太确定人们是否可以将 Ruby-Sass 视为 Sass 的某种规范标准。我甚至会把我的钱投在 libsass 上使用得比 ruby-sass 更频繁，或许使其成为事实上的标准？ - Alex

Answer 3

你是可以的。在这种情况下，它与标准CSS中的@import规则完全相同。只需提供指向CDN托管的CSS文件的URL即可。 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import

- Vince

---

我是否漏掉了什么，还是你的链接明确表示这是不可能的？ - ESR

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

如果你导入一个外部托管的Sass/SCSS文件，那么这个导入将会被编译成最终结果，就像它是一个CSS导入一样。而@import "http://foo.com/bar";则会编译成@import "http://foo.com/bar";。 - ESR

Answer 4

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

1. Imports where the URL ends with .css.

   @import "theme.css";

2. Imports where the URL begins http:// or https://.

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

3. Imports where the URL is written as a url().

   @import url(theme);
   

4. Imports that have media queries.

   @import "landscape" screen and (orientation: landscape);

- Ahmed eltarouty

Answer 5

是的，你可以使用PostCSS Import URL Plugin导入外部css文件。它将把外部CSS导入到你的代码中，以便你可以在主CSS中编译它。

- Ihor Zenich

Answer 6

@import url('https://example.com/path/filename.scss');

使用import语句将外部的scss文件导入到本地。

- smsivaprakaash