未导入css中的样式。
下面是我的基本HTML文件（base.html）的标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale = 1" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="homeDesign.css"/>
<title> {% block title %}Base{% endblock %} </title>
</head>下面是我的CSS文件（“homeDesign.css”）：
@charset "UTF-8";
.note-card {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
}
.container,body {
background-color: #95a1b0;
overflow-x: hidden;
}
.sub-container {
width: auto;
display: flex;
column-gap: 10px;
justify: space-around;
}应该应用css的主页html（home.html）：
<h1 style="color: #1b0e02;">Notes</h1>
<div class="sub-container">
{% for note in user.notes %}
<div class="note-card">
<button type="button" class="close" on-click="deleteNote({{ note.id }})">×</button>
</br>
{{ note.text }}
</div>
{% endfor %}
</div>**当我尝试使用在head标签内内联应用样式时，它可以工作。但我想从外部来定义它。
下面是文件夹层次结构的截图，供您参考：enter image description here
1条答案
按热度按时间ddarikpa1#
我认为index.js正在渲染html文件，并且它与css文件不在同一个目录中。我会尝试提供CSS的绝对路径，而不是相对路径，看看是否有效。比如，试试这个