Question

刚刚开始将Parcel与Pug一起使用。我在如何使用pug中的链接到不同的pug文件时遇到问题。

我的src目录中有两个pug文件，分别是index.pug和tradgard.pug。我也有一个nav include，两个提到的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，它确实会在浏览器中正确显示，并带有以下网址

http://localhost:1234/tradgard.html

我检查了属性检查器的索引页面，并且css链接消失了，但是对于tradgard页面，css链接位于标题中。

为什么会出现这种奇怪的行为，我怀疑我通过错误的方式对nav包含链接进行编码，因为我遇到了很多错误：

“无法从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"
  }
}

感谢:)

Answer 1

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

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

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

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

将“ tradgard.pug”重命名为“ index.pug”，并将其放置在名为“ tradgard”的目录中
运行Parcel时，请指定多个入口点，每个index.pug一个。您也许可以使用这样的通配符：parcel src/index.html src/**/index.html
包裹开发服务器仍无法提供预期的页面，但是您可以使用Browsersync之类的备用开发服务器。

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

帕格在包裹中的使用

1 个答案: