减：@import url 在缩小后使用 http 而不是 https答案

【问题标题】：Less: @import url using http instead of https after minification减：@import url 在缩小后使用 http 而不是 https
【发布时间】：2015-04-21 11:57:27
【问题描述】：

我收到此错误：

Mixed Content: The page at 'https://theculprit.com/url' was loaded over HTTPS, but requested an insecure font 'http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf'. This request has been blocked; the content must be served over HTTPS.

当我查看源代码以查找通过 HTTP 而不是 HTTPS 导入字体的位置时，与字体导入有关的唯一行是：

@import url('//fonts.googleapis.com/css?family=Open+Sans:400,700,300,600,800');

最初我虽然HTTPS assets loading over HTTP 可能是我的错误，但字体已经使用源协议导入。这只发生在代码被缩小后。

我对字体/css/less 不是很熟悉，所以我完全迷路了。如果有任何其他信息可以提供帮助，请告诉我。

【问题讨论】：

您确定您的导入是以 https 形式出现的吗？导致问题的 URL 来自您正在导入的 CSS，而不是 JS 行。 fonts.googleapis.com/css?family=Open+Sans:400,700,300,600,800
@MatthewGreen 我假设使用 '//myurl' 开始导入会自动使用调用源的协议发出请求。这是不正确的吗？我知道不是 JS 的行导致错误，我只是将其列为另一位信息。
它应该这样工作。您可以看到，当您点击 font.googleapis URL 时，该协议会根据您使用的内容更改该 CSS 中的链接。但是，这显然在这种情况下不起作用。我会尝试使用协议来查看错误是否消失，然后查看您的 CSS 导入是否实际上使用了错误的协议。
@MatthewGreen 因此，当我将该导入行更改为使用 https 协议时，我看到 gstatic url 从 http 更改为 https。我现在的问题是，如果我直接从浏览器中点击 fonts.googleapis 链接，我在网络活动中根本看不到 gstatic URL - 什么都没有下载。在实际站点上运行的字体导入是 fonts.gstatic 调用的来源吗？
它应该只在需要该资源时下载一些东西。因此，您必须在您的 CSS 中使用它，并且您的计算机上还没有该字体的本地副本以供下载。因此，仅仅在浏览器中点击 URL 并不是一个很好的测试。

标签： css angularjs fonts less minify

【解决方案1】：

原来minifier 我正在使用automatically 将从//myurl 开始的导入变成http://myurl，这导致了我的问题。我添加了processImport: falseoption，现在一切正常。

已在GitHub 上提出了有关此行为的问题。

【讨论】：

【解决方案2】：

如果您在 https 上托管网站，那么您将在使用 http 协议导入外部文件时遇到问题。

我建议您下载 google 字体并将其托管在网站上。

或其他选项。

您可以在不导入外部文件的情况下使用网络字体。您可以使用 data uri 将字体直接包含到您的 css 文件中。首先你需要下载谷歌字体。

将文件转换为数据字符串 (dataurlmaker)

创建你的@font-face 例如。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg');
}

并用数据值替换您的网址

【讨论】：

【解决方案3】：

我遇到了同样的问题。但我不想使用@Aaron 的解决方案，因为这样我的任何@import 都不起作用。更好的选择可能是：

{processImportFrom: ['!fonts.googleapis.com']}

就像我的情况一样，gulp 现在将 fonts.googleapis.com 更改为 http://fonts.gstatic.com，因为我的网站位于 https chrome 上出现错误。使用上述选项将其“列入黑名单”对我有用。虽然我认为必须有其他选项，例如添加 https 导入的选项。

【讨论】：