Question

我已经设立了快速项目。我使用Pug作为视图引擎。

我的app.js中有以下几行，

app.set('views', path.join(__dirname, './views'));
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, './public')));

我在index.pug视图中得到了以下内容，

    link(rel='stylesheet', href='/stylesheets/style.css', type='text/css')
    link(rel='stylesheet', href='/stylesheets/boostrap.min.css', type='text/css')

CSS文件位于正确的文件夹（公共/样式表）中，但是当我加载应用程序时，视图似乎不会加载CSS文件。

可以找到包含其目录和所有代码的完整项目here

Answer 1

错误链接到引导程序，你有嘘声 s 陷阱：

link(rel='stylesheet', href='/stylesheets/boostrap.min.css', type='text/css')

Answer 2

我遇到了类似的问题，引导程序文件已加载，但代码对任何引导程序类都没有影响。问题是我在 rel 属性上有一个错字。我有 stytesheet 而不是 stylesheet

link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')

Answer 3

我的代码正在使用这个

doctype html
html(lang='en')
  head
    link(rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous")

    title Jade
  body
    h1 Jade - node template engine

Answer 4

如果您使用的是pub 2. *或更高版本，则以下代码将起作用

html
    head
        style
             include ./style.css
    body

Pug文件没有加载CSS

4 个答案: