html - 将 .pug 编译为 html 后加载外部 CSS

标签 html css visual-studio-code pug

我有一个 example.pug 和一个 example.css。在命令行上,我使用 pug example.pug 生成一个 example.html 页面。唯一的问题是,当我在浏览器中打开页面时,外部样式没有链接。我该如何解决这个问题?

大多数与此类似的问题都涉及我没有使用的 Express。

谢谢!我将在下面添加文件目录。 -目录 |-风格 |-example.css |-例子 |-示例文件夹 |-example.pug

希望这是有道理的。我也将 .css 直接移动到与我的 .pug 相同的位置,就像这样。 -目录 |-example.pug |-example.css

然后我链接为 link(href='./tailwater.css', rel='stylesheet', type='text/css') 并且 css 仍然不会在页面上加载。

最佳答案

可能是css文件路径写错了

假设这是你的目录结构

-Directory
|- example.css
|- example.html(generated file)
|- example.pug

然后把链接写成

link(rel="stylesheet", href="./example.css")

这样你的 example.html 将包含

<link rel="style" href="./example.css">

如果目录不是给定的结构,则相应地调整 href

关于html - 将 .pug 编译为 html 后加载外部 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50108770/

相关文章:

html - 尝试使用 css flexbox 创建 View ,结合行和列

visual-studio-code - 编写 VS Code 扩展时如何聚焦自定义 View ?

angularjs - VSCode 找不到 angular.d.ts

html - 我的 SVG 文件太大了,占据了整个网页

javascript - 有没有一种方法可以在网页上使用矢量绘图创建一个小图形?

css - 如何使用 css 为 float 元素创建的行设置边框属性?

jquery - 如何在 html/css 中使用 sprite 图像并使用 jQuery 切换更改

reactjs - 使用 VSCode 和 Firefox 而不是 Chrome 进行 React 调试

jquery - 全宽响应式等间距水平菜单栏 bootstrap 3

html - 避免按钮在重新缩放时发生碰撞