帕格在包裹中的使用答案

【问题标题】：Pug use in Parcel帕格在包裹中的使用
【发布时间】：2019-08-08 13:55:05
【问题描述】：

刚开始使用 Parcel 和 Pug。我遇到了如何在 pug 中使用指向不同 pug 文件的链接的问题。

我的 src 目录中有两个 pug 文件，index.pug 和 tradgard.pug。我还有一个导航包含，两个提到的哈巴狗文件都使用它。这是导航包括的代码：

nav#nav.flex-nav
    ul
      li
        a(href='/') Hem
      li
        a(href='#') Vår story
      li
        a(href='/tradgard') Trädgården
      li
        a(href='#') Matsal
      li
        a(href='#') Matevent
      li
        a(href='#') Album
      li
        a(href='#booking') Boka bord
      li
        a(href='#') Shop

这给出了以下 html：

<nav class="flex-nav" id="nav">
    <ul>
      <li><a href="/">Hem</a></li>
      <li><a href="#">Vår story</a></li>
      <li><a href="/tradgard">Trädgården</a></li>
      <li><a href="#">Matsal</a></li>
      <li><a href="#">Matevent</a></li>
      <li><a href="#">Album</a></li>
      <li><a href="#booking">Boka bord</a></li>
      <li><a href="#">Shop</a></li>
    </ul>
</nav>

链接指向索引文件，可以看到，链接：

li
  a(href='/tradgard') Trädgården

翻译成：

<li><a href="/tradgard">Trädgården</a></li>

因此，如果我在索引页面上并单击该链接，则在服务器的浏览器中，它会在 url 窗口中转到 tradgard，但它仍然在浏览器中显示索引页面。

如果我将导航包含更改为：

li
  a(href='/tradgard.pug') Trädgården

产生以下html：

<li><a href="/tradgard.pug">Trädgården</a></li>

索引页面完全失去了它的样式，但如果我现在点击链接到 tradgard，它确实在浏览器中正确显示，并带有以下 url，

http://localhost:1234/tradgard.html

我检查了索引页面的属性检查器，css链接不见了，但是对于tradgard页面，css链接在标题中。

为什么我会出现这种奇怪的行为，我怀疑我正在以错误的方式编写导航包含链接，因为我遇到了很多错误：

“未能从 CSSStyleSheet 中读取 'cssRules' 属性”

在属性检查器中。

我不知道这是我编码导航包含链接错误还是包裹问题。

这是我的 package.json 文件：

{
  "name": "parcel_pug_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel serve src/index.pug",
    "prod": "parcel build src/*.pug -d public --public-url ./"
  },
  "keywords": [],
  "license": "MIT",
  "devDependencies": {
    "parcel-bundler": "1.12.0",
    "pug": "2.0.3",
    "sass": "1.17.2"
  }
}

谢谢:)

【问题讨论】：

标签： html pug parceljs

【解决方案1】：

从 index.pug 引用 tradgard.pug 的正确方法是 a(href='/tradgard.pug')。

Parcel 构建器需要知道文件扩展名才能知道如何处理它。
Parcel 构建器似乎不会对不以文件名结尾的 URL 进行复杂处理（例如查找匹配的文件/目录）。

同样，Parcel 开发服务器处理没有文件名的 URL，就好像您的项目是单页应用程序 (SPA)。如果 URL 不以文件名结尾，则加载 index.html 文件并传递整个 URL。如果您的项目不是 SPA，这可能不直观。（这就是当您单击链接时 Parcel 开发服务器提供索引页面的原因。如果您继续单击该链接，请注意相对路径一直附加到 URL。）

有一种方法可以在 index.pug 中使用不带文件名的链接，例如 /tradgard：

将“tradgard.pug”重命名为“index.pug”，放到名为“tradgard”的目录中
运行 Parcel 时指定多个入口点，每个 index.pug 一个。您也许可以像这样使用通配符：parcel src/index.html src/**/index.html
parcel 开发服务器仍无法提供预期的页面，但您可以使用替代开发服务器，例如 Browsersync。

CSS 错误似乎是一个单独的问题，我无法对此发表评论，因为我既不知道您如何包含 CSS 文件，也不知道 CSS 文件包含什么。（尝试打开一个新问题。）

【讨论】：