[Dúvida] Duvida sobre o CSS | Django: CRUD e persistência no S3

Então... também estou tendo problema com o css... vi os posts do forum e não encontrei o erro

uma das soluções era mexendo no settings setando as configurações como abaixo:

# AWS Settings

AWS_ACCESS_KEY_ID = str(os.getenv('AWS_ACCESS_KEY_ID'))
AWS_SECRET_ACCESS_KEY = str(os.getenv('AWS_SECRET_ACCESS_KEY'))
AWS_STORAGE_BUCKET_NAME = str(os.getenv('AWS_STORAGE_BUCKET_NAME'))
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.sa-east-1.amazonaws.com'
AWS_DEFAULT_ACL = 'public-read'
AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400'
}
AWS_LOCATION = 'static'
AWS_QUERYSTRING_AUTH = False
AWS_HEADERS = {
    'Access-Control-Allow-Origin': '*',
}

STORAGES = {
    "default": {
        "BACKEND": "storages.backends.s3.S3Storage",
        "OPTIONS": {
            "access_key": str(os.getenv('AWS_ACCESS_KEY_ID')),
            "secret_key": str(os.getenv('AWS_SECRET_ACCESS_KEY')),
            "bucket_name": str(os.getenv('AWS_STORAGE_BUCKET_NAME'))
        },
    },
    "staticfiles": {
        "BACKEND": "storages.backends.s3.S3Storage",
        "OPTIONS": {
            "access_key": str(os.getenv('AWS_ACCESS_KEY_ID')),
            "secret_key": str(os.getenv('AWS_SECRET_ACCESS_KEY')),
            "bucket_name": str(os.getenv('AWS_STORAGE_BUCKET_NAME'))
        },
    },
}


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/

STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'setup/static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

# Media
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/media/'

outra solução tambem dita no video era remover a / antes de assets e styles como está abaixo também:

{% load static %}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Space</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'styles/style.css' %}">
</head>

<main class="principal">
    <section class="menu-lateral">
        <nav class="menu-lateral__navegacao">
            <a href="{% url 'index' %}"><img src="{% static 'assets/ícones/1x/Home - ativo.png' %}"> Home</a>
            <a href="{% url 'login' %}"><img src="{% static 'assets/ícones/1x/Mais vistas - inativo.png' %}"> Login</a>
            <a href="{% url 'cadastro' %}"><img src="{% static 'assets/ícones/1x/Novas - inativo.png' %}"> Cadastro</a>
            <a href="{% url 'logout' %}"><img src="{% static 'assets/ícones/1x/Surpreenda-me - inativo.png' %}"> Logout</a>
            <a href="{% url 'nova_imagem' %}"><img src="{% static 'assets/ícones/1x/new.png' %}"> Nova Imagem</a>
        </nav>
    </section>

também falaram para rodar o comando python manage.py collectstatic que também rodei. depois tentei até rodar outra vez apareceu algum erro tentando rodar de novo

mas o site em si funciona mas continua não lendo o CSS:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Se alguem puder me ajudar. O Projeto também está no link: https://github.com/ManuelVenturaNeto/Alura_space

Parece que o problema está na chave CashControl dentro de AWS_S3_OBJECT_PARAMETERS. Para corrigir isso, você deve mudar CashControl para CacheControl. Aqui está como suas configurações devem ficar:

# AWS Config

AWS_ACCESS_KEY_ID = os.getenv('AWS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.getenv('AWS_ACCESS_KEY')
AWS_STORAGE_BUCKET_NAME = os.getenv('AWS_BUCKET_NAME')
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'

AWS_DEFAULT_ACL = 'public-read'

AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400'  # Corrigido aqui
}

AWS_LOCATION = 'static'
AWS_QUERYSTRING_AUTH = False

AWS_HEADERS = {
    'Access-Control-Allow-Origin': '*',
}

Salve as alterações no arquivo de configuração.

Reexecute o comando para coletar os arquivos estáticos:

python manage.py collectstatic

No meu caso isso resolveu meu problema (salve GPT) e pude continuar o projeto.

Mergulhe em programação