为什么 Jekyll 会加载 navbar.less？答案

【问题标题】：Why does Jekyll load navbar.less?为什么 Jekyll 会加载 navbar.less？
【发布时间】：2016-01-11 03:33:42
【问题描述】：

我正在使用 Jekyll 在本地和 on Github pages 生成一个站点。两个实例都加载了一个 navbar.less 文件（它正在摆脱我的导航栏），但我在我的代码中找不到。

如何加载这个 navbar.less 文件？

这是我的 head.html 文件：

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}">
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
</head>

我的style.css file 没有提到这一点。是 Bootstrap 加载它还是 Jekyll 以某种方式加载它？

【问题讨论】：

在 gh-pages 和存储库克隆后都没有复制。你的文件是鬼！你清理过的浏览器缓存了吗？你在正确的文件夹中做jekyll serve 吗？
它没有显示在我的来源中，但是当我在导航栏中检查徽标的 img 标签时，Chrome 检查器中的其中一种（基本）样式来自 navbar.less。当我单击该文件以查看其中的内容时，它会打开一个空白文件。

标签： html css twitter-bootstrap jekyll github-pages

【解决方案1】：

您看到的是 chrome/firefox 对通过较少转换生成的 map file 的解释。您可以在bootstrap css file 的最后看到对它的引用。此文件用于debugging preprocessor code like less or sass with chrome。

其实你的 css 规则就在 bootstrap.min.css 文件中。

您只需通过替换 css/style.css 来覆盖它：

.navbar .navbar-header .navbar-brand img {
    max-height: 43px;
    margin-top: -14px;
}

作者：

.navbar .navbar-header .navbar-brand img {
    max-height: 43px;
    margin-top: -14px;
    display: inline;
}

【讨论】：

做到了。稍后我将不得不再次阅读此内容，以更好地了解 Chrome/Firefox 是如何实现这一点的，但谢谢你。