CSS 样式未应用于视图答案

【问题标题】：CSS styles not being applied to viewCSS 样式未应用于视图
【发布时间】：2019-12-05 07:55:32
【问题描述】：

我正在使用 node.js 和 express 创建一个应用程序。我使用哈巴狗作为我的模板引擎。样式表中的样式未应用于视图。

在我的 header.pug 文件中，我有

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

样式表位于 public/stylesheets 中。我还在 app.js 文件中包含以下代码。

// serve static files from /public
app.use(express.static(__dirname + '/public'));

app.set('view engine', 'pug');
app.set('views', __dirname + '/views');

当我运行应用程序并期待文档时，我可以在新的点击中打开样式表并查看样式表，但它没有将这些样式应用于 pug 文件？

【问题讨论】：

标签： css node.js express pug

【解决方案1】：

先删除/

也改变 rel 属性

喜欢：

链接（rel='stylesheet', type='text/css', href='stylesheets/style.css'）

【讨论】：

对不起，这也不起作用。我的意思是当我检查元素时，我可以看到样式表（在新选项卡中），但由于某种原因，它没有应用样式。即我正在将身体的背景设置为蓝色进行测试，当我检查时我可以看到该规则，但它没有被应用。

【解决方案2】：

您也可以尝试这种方式来加载样式表。

index.pug

html  
head
    style
        include style.css
    title This is my first Pug file 
body
    div.split.left
        div.centered...

文件夹结构需要这样。

views
   index.pug
   style.css
index.js

【讨论】：