Question

我试图在css文件中编译我的scss。除此之外一切正常：

@import url（＆＃39; http://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700＆＃39;）;

在我的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));
});

我试过没有引号，没有网址，没有一个工作。其他人进口工作但是当我尝试使用@import url时，使用任何网址，它并不重要，它不会工作。

有什么想法吗？

Answer 1

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

尝试https ---注意“s”

它是你的CSS的第一行吗？

你在哪里以及如何使用Roboto - 我没有看到它？

Answer 2

你不应该使用@import，因为它可能导致渲染块问题，我确实尝试了使用sass-lint的VSCode中的@import。他们表现出错误。

我建议以这种方式使用：

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

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

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

检测：使用pagespeed工具。在左栏中，其中一项是＆＃34;避免@ CSS导入＆＃34;。如果您有绿色复选标记，则找不到@imports。如果找到，将会出现红色＆＃34; x＆＃34;。

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

@import url("style.css")

不是使用import方法调用该css文件，最好只将一个额外的css保存在一个文件中（将导入的css复制并粘贴到原始的css文件中）。

更多信息：浏览此链接。 Dont use @import

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

2 个答案: