CSS不会链接到HTML [重复]答案

【问题标题】：CSS won't link to HTML [duplicate]CSS不会链接到HTML [重复]
【发布时间】：2020-12-09 20:06:46
【问题描述】：

（这里是初学者...）

我的 CSS 不会链接到我的 HTML。我正在使用 GOORM IDE，我已经阅读了有关此主题的其他问题并尝试了他们的解决方案，但似乎没有一个有效（当我应用 CSS 内联时，它工作得很好），到目前为止我已经尝试过：

将 main.css 移动到与 header.ejs 文件相同的文件夹中
添加 type="text/css"
将 href 更改为：

main.css

/main.css

/stylesheets/main.css

/public/stylesheets/main.css

../stylesheets/main.css

这些都没有奏效。有任何想法吗？如果可能，我想将 CSS 保存在单独的文件夹中。如果有用的话，我也会在 GOORM 上包含文件结构的屏幕截图。

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="main.css">

【问题讨论】：

欢迎来到 SO！ Beginner here 我们不需要知道，一个好问题与初学者无关。话虽如此，这看起来像是重复的。
我从来没有听说过这个ide。
“我正在使用 GOORM IDE” - 不确定那是什么；但假设您仍然在普通浏览器中测试结果，请检查浏览器控制台的内容。
您的main.css 实际包含什么，您确定它只是 CSS？（将内联样式移动到外部样式表时，一个“流行”初学者的错误是将<style> 标签也复制并粘贴到 CSS 文件中，但那些不属于那里。）
@IslamElshobokshy 谢谢，您分享的链接：“Can't get stylesheet to work with ejs for node.js”完美解决了这个问题！

标签： html css

【解决方案1】：

在 VSCode 中测试，这对我有用：

您的 header.ejs 在视图/部分中，您的 main.css 在公共/样式表中。

这意味着您的链接必须向上移动两个目录。使用：

<link rel="stylesheet" href="../../public/stylesheets/main.css>

【讨论】：

【解决方案2】：

是的，我也认为，应该有.css-File的路径。

例如，我在头部这样调用我的 css：

<link rel="stylesheet" href="app/css/app.css" />

所以你需要调用你的文件：

<link rel="stylesheet" href="public/stylesheets/main.css" />

顺便说一句：字体的链接是否正确？这是一个有效的存储库吗？

【讨论】：

【解决方案3】：

嗯，我不确定，但我认为您基于图像的路径应该是

    <link rel="stylesheet" href="stylesheets/main.css">

【讨论】：

如果您不确定，请不要猜测答案。 Node.js 不能那样工作。
:) 我正在尝试帮助我了解的内容。