@import url 不适用于 gulp-ruby-sass答案

【问题标题】：@import url doesn't work with gulp-ruby-sass@import url 不适用于 gulp-ruby-sass
【发布时间】：2017-02-07 15:50:24
【问题描述】：

我正在尝试将我的 scss 编译到一个 css 文件中。一切正常，除了这个：

@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700');

在我的 css 中，我也有同样的东西：

   @import url("http://fonts.googleapis.com/css?family=Roboto:400,500,700,300");
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} ......

这是我的 gulp 任务：

  return sass(vendorFiles.scss.app, {
        compass: true,
        style: 'compressed'
    })
        .on('error', sass.logError)
        .pipe(rename('app.css'))
        .pipe(gulp.dest(distPaths.css));
});

我试过不带引号，不带 url，这些都不起作用。其他导入工作，但是当我尝试使用 @import url 时，使用任何 url，没关系，它不会工作。

有什么想法吗？

【问题讨论】：

标签： compilation sass gulp gulp-sass

【解决方案1】：

你说它不起作用是什么意思？你得到一个 sass 错误吗？

试试 https --- 注意“s”

这是你的css的第一行吗？

您在哪里以及如何使用 Roboto - 我看不到它的参考？

【讨论】：

我在 sass 中没有错误。在我的 css（已编译）中，我得到了同一行，没有转换或错误，只是 @import url(...)。我尝试了“http”和 https 相同的结果。我尝试了多个 url（如材料图标），结果相同。它可以是我的第一行 css，如果我首先在我的 app.scss 中编写它，但如果我把它放在最后、中间或任何地方，问题是一样的：/

【解决方案2】：

你不应该使用@import，因为它会导致渲染块问题，我确实在 VSCode 中使用 sass-lint 尝试了 @import。他们显示了一个错误。

我建议以这种方式使用：

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700"   rel="stylesheet">

问题：这种调用 CSS 的方法很糟糕，因为它增加了在加载页面之前加载 CSS 所需的时间。

解决方案：找到 @import 调用并替换它们。

检测：使用 pagespeed 工具。在左侧栏中，其中一项是“避免@ CSS 导入”。如果您有一个绿色复选标记，则没有找到 @imports。如果找到，会有一个红色的“x”。

详细信息：CSS 导入看起来像这样，通常位于文件顶部附近。

@import url("style.css")

与其使用导入方法调用该 css 文件，不如将附加的 css 保留在一个文件中（将导入的 css 复制并粘贴到原始 css 文件中）。

欲了解更多信息：请通过此链接。 Dont use @import

【讨论】：

这是一个很好的答案，但不适用于我的问题^^ 当我在一个文件 .css 中编译我的 .scss 时，导入 url 不适用于 url。编译只在您的服务器上完成一次，因此没有渲染块问题。不过谢谢你的回答！