在正确编译的 django 项目中找不到 screen.css compass/sass

Question

我有一个 django 项目 compass init 用来在里面创建新的 compass 文件夹。当我在其中进行更改时，我的 compass/sass 正在编译，但我的模板没有进行任何这些更改或正常工作 - 在调试器中我收到 404 错误加载 'screen.css'，但它发现 bootstrap 适当地。

在 base.htm 中，所有模板扩展：

{% block main_header %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sitename</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
        {% block custom_stylesheets %}{% endblock %}
        <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>
{% endblock %}

在settings.py中：

INSTALLED_APPS = (
    ...
    'bootstrapform',
    'djcompass',
)

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

MEDIA_URL = '/media/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'staticfiles'),
)

SETTINGS_PATH = os.path.dirname(__file__)
PROJECT_PATH = os.path.join(SETTINGS_PATH, os.pardir)
PROJECT_PATH = os.path.abspath(PROJECT_PATH)

    os.path.realpath(os.path.dirname(__file__)) + '/templates/',
)

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

在screen.scss中：

@import "compass/reset";
@import "partials/weekly_schedule";

在_weekly_schedule.scss中：

@import 'compass/css3/box-shadow';
@import 'compass/css3/box-sizing';

.tabbed-content-box{
    border-radius: 6px;
    padding: 16px 5px 5px 5px;
}
...etc...

在相关模板中，weekly_schedule.htm:

{% extends 'base.htm' %}
{% load extras form_fields bootstrap %}

{% block body_block %}
    <form id="schedule_form" method="post" action="{% url 'owners:weekly_schedule' biz.slug %}"
            enctype="multipart/form-data">
        {% csrf_token %}

        {% for i in 7|get_range %}
            {% day_field day_dict i schedule_form %}
        {% endfor %}

<div style="clear;"></div>
<br/>

   <input type="submit" name="submit" value="Set schedule" />

    <button type="button" onclick="myFunction()">Try it</button>

{% endblock %}

过去，我的问题是导入 'compass/css3' 这毫无意义，因为我开始了一个指南针项目。此刻不再抱怨。我的 screen.css 似乎编译得很好，说

/* line 93, ../sass/partials/_weekly_schedule.scss */
.faketestthingy {
  background-color: red;
}

在我做了一个假条目之后。最重要的是，在项目根级别的 config.rb 中（compass init 放置它的地方）我有：

#http_path = "/home/myname/django_practice/scheduler_app"
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"

其中两个http_paths我都试过了，都没有用。我不记得为什么我过去改变了我的 PROJECT_PATH （这是一个静态文件的东西）但我也尝试过没有绝对路径。我尝试将所有具有 "static/staticfiles" 的媒体设置更改为 "stylesheets"，并且在 screen.css 上仍然是 404。非常感谢任何指针。谢谢

Answer 1

如果您想保持这种布局，您需要将 stylesheets 添加到 STATICFILES_DIRS:

1) 正在更新 STATICFILES_DIRS

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'staticfiles'),
    os.path.join(BASE_DIR, 'stylesheets'),
)

2) 正在更新 base.html

–加载staticfiles
– 使用 {% static %} 标签

嵌入样式表

{% load staticfiles %}
{% block main_header %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sitename</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
        {% block custom_stylesheets %}{% endblock %}
        <link href="{% static "screen.css" %}" media="screen, projection" rel="stylesheet" type="text/css" />
</head>
{% endblock %}

更新： 为什么之前没用

尤其是在开始时，需要花一些时间来感受 Django 所谓的静态文件和媒体文件与驱动应用程序的 Python/Django 代码的分离。

重要的一点是，从您的目录布局来看，您的网络服务器无法访问任何目录。这就是为什么如果我们想使用自定义目录布局，我们需要告诉 Django 我们放置静态资产的目录（css、javascript、图像、字体等）。我们通过添加 STATICFILES_DIRS 设置来做到这一点：

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'staticfiles'),
    os.path.join(BASE_DIR, 'stylesheets'),
)

现在 Django 知道在这两个目录中查找静态文件。这是第一步。

下一个重要的事情是 STATIC_URL 设置：

STATIC_URL = '/static/'

这告诉 Django 基础 URL 公开静态文件。假设我们有这些文件

/staticfiles/
    logo.jpg
    bg_tile.png
    js/
      app.js  
/stylesheets/
    styles.css
    styles_mobile.css

通过以上设置，Django 将在我们定义的命名空间下唯一地提供它们STATIC_URL，这意味着我们可以这样访问它们：

http://example.com/static/logo.jpg
http://example.com/static/bg_tile.png
http://example.com/static/js/app.js
http://example.com/static/styles.css
http://example.com/static/styles_mobile.css

长话短说，独立于它们的物理位置 Django 使它们可以通过唯一的 /static/ url.

访问

这就是 <link href="/stylesheets/style.css".../> 不起作用的原因。网络服务器（在开发时可能 runserver，在生产中类似于 nginx 或 apache）只是对 stylesheets 目录一无所知。

所以最后一步是使用 Django 的 static 模板标签来创建 link。这确保如果您更改 STATIC_URL 设置（例如从 /static/ 到 /assets/），您不需要触摸任何模板，因为 {% static %} 正确解析它你.

一旦开始将您的应用程序部署到实时站点，它就会涉及更多（但不是那么多），但我希望这些信息足以帮助您入门。

在正确编译的 django 项目中找不到 screen.css compass/sass

Cannot find screen.css compass/sass in django project that is compiling correctly

css

django

static-linking

compass-sass