Django React 页面无法加载 css 文件

Question

I am creating an application with djangorest framework for backend and React for frontend.我正在使用 djangorest 框架为后端和 React 为前端创建一个应用程序。 The backend and frontend are both apps of the same django projects.后端和前端都是同一个 django 项目的应用程序。 However, while hosting my website, the CSS files are not loading, most probably because of the path.但是，在托管我的网站时，没有加载 CSS 文件，很可能是因为路径。

The directory structure in my frontend django app looks like:我的frontend django 应用程序中的目录结构如下所示：

$ tree -d -L 1
.
├── migrations
├── node_modules
├── __pycache__
├── src
├── static
└── templates

and the templates directory looks like this:模板目录如下所示：

templates/
└── frontend
    ├── css
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   ├── bootstrap-theme.min.css
    │   ├── fontAwesome.css
    │   ├── fonts
    │   │   ├── flexslider-icon.eot
    │   │   ├── flexslider-icon.svg
    │   │   ├── flexslider-icon.ttf
    │   │   └── flexslider-icon.woff
    │   ├── light-box.css
    │   ├── owl-carousel.css
    │   └── templatemo-style.css
    └── index.html

My index.html file looks like this:我的index.html文件如下所示：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>abcd</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="/frontend/css/fontAwesome.css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    </head>
<body>
<div id="app">
    <!-- React will load here -->
</div>
</body>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
</html>

and I run into the following log while hosting the site:我在托管网站时遇到了以下日志：

[30/Jun/2020 22:39:59] "GET / HTTP/1.1" 200 1154
Not Found: /css/bootstrap.min.css
[30/Jun/2020 22:39:59] "GET /css/bootstrap.min.css HTTP/1.1" 404 2313
Not Found: /css/fontAwesome.css
[30/Jun/2020 22:39:59] "GET /css/fontAwesome.css HTTP/1.1" 404 2307
[30/Jun/2020 22:39:59] "GET /static/frontend/main.js HTTP/1.1" 200 1004248
[30/Jun/2020 22:40:00] "GET /api/event HTTP/1.1" 301 0

I am not sure how to set the path for the css files and if they are even supposed to be in the directory I have put them in. WHat is the correct directory structure if my react app is a django app in my project?我不确定如何设置 css 文件的路径，如果它们甚至应该在我放入的目录中。如果我的反应应用程序是我项目中的 django 应用程序，那么正确的目录结构是什么？

Answer 1

Your css folder shouldn't be in your templates folder, it shoud be in your static folder.您的css文件夹不应该在您的templates文件夹中，它应该在您的static文件夹中。 Only this folder gets exposed to the outside world.只有这个文件夹会暴露给外界。 The template folder is just a place where django gets its templates to render them to the client, but it does not expose it directly.模板文件夹只是 django 获取其模板以将其呈现给客户端的地方，但它并不直接公开它。

Also don't forget to run python manage.py collectstatic as well.也不要忘记运行python manage.py collectstatic 。

Django React 页面无法加载 css 文件

问题描述

1 个解决方案

解决方案1
0 2020-07-02 13:06:44

Django React 页面无法加载 css 文件

问题描述

1 个解决方案

解决方案1 0 2020-07-02 13:06:44

解决方案1
0 2020-07-02 13:06:44