Question

我正在本地和on Github pages使用Jekyll生成一个网站。这两个实例都加载了一个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？

Answer 1

你看到的是对较少转换产生的map file的chrome / firefox解释。您可以在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;
}

by：

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

为什么Jekyll加载navbar.less？

1 个答案: