I'm trying to link a css stylesheet to my django html template but it keeps being read as an html file with the error:
127.0.0.1/:1 Refused to apply style from 'http://127.0.0.1:8000/static_cdn/css/base-template.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
This is my base.html file and I know the path is correct because VS Code directs me to the file when I left-click on the link.
<head>
<link type="text/css" rel="stylesheet" href="../../static_cdn/css/base-template.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>GuitarShop</title>
</head>
Here is my directory:
Project Folder
guitarshop > templates > base.html
static_cdn > css > base-template.css
The reason why I am storing the css file in the static_cdn folder instead of a static folder in the templates folder is because when I do so, the command "python manage.py collectstatic" doesn't collect the file folder so I get the following error:
GET http://127.0.0.1:8000/static/base-template.css net::ERR_ABORTED 404 (Not Found)
Please help!
Have you pointed your "Static_URL" to static_cdn folder?
Related
Im working on a personal project and im using django.
In this project I like to use scss/sass style file, but I dont know how to install and set up in my Django project.
Any help will be appreciated
Thank u!
In order to work with scss or sass in django project
Step 1:
Install sass/scss in your local machine either npm or Homebrew (i prefer npm)
sass installation guide
Step 2:
After installation, you need to compile your sass/scss to css file.
For that, run the command (in cmd for windows)
sass [your scss file location] [where your css file needs to be stored]
For example..
sass source/stylesheets/index.scss build/stylesheets/index.css
If you are using django, then you must be using static folder in your project, in that case you should go with this command
sass static/scss/index.scss static/css/index.css
Step 3:
The above command needs to be executed every single time when a change occurs in scss file..
Inorder to get rid of that, use a --watch command.
sass --watch static/scss/index.scss static/css/index.css
There are more ways to do this. You can work with scss/sass files with Python or with NPM. If you do not want to mess with node.js I would recommend to use python way (install django-sass-processor):
Check out this clear manual - How to Easily Use SASS/SCSS with Django from webarchive or django-sass-processor.
Basically run install:
pip install libsass django-compressor django-sass-processor
Add to configuration file:
INSTALLED_APPS = [
...
'sass_processor',
...
]
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'sass_processor.finders.CssFinder',
]
STATIC_ROOT = BASE_DIR / 'static'
SASS_PROCESSOR_ROOT = STATIC_ROOT
Using Django-sass-processor in Templates:
Inside of your template, load in django-sass’s library tags and use {% sass_src %} instead of {% static %} to load your SCSS/SASS stylesheet.
{% load sass_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% sass_src 'path/to/file.scss' %}" rel="stylesheet" type="text/css" />
<title>Django Sass</title>
</head>
<body>
<h1>This template's stylesheet was written SASS/SCSS</h1>
</body>
</html>
I just started a new project and currently Django can't find the static files. I'm using Django==2.2.6
The static files are located in an app called "website". This is the file structure.
https://i.imgur.com/AnPACop.png
This is from the settings:
STATIC_URL = '/static/'
This is how i include the static file:
{% static 'css/style.css' %}
The URL to the static file seems correct:
<link href="/static/css/style.css" rel="stylesheet">
EDIT: its NOT correct. But this works:
<link href="/static/core/css/style.css" rel="stylesheet">
Make your file structure like the following one:
ProjectFolderName
static
- css
- js
template
website
projectfoldername
migrations
Put your static folder in your project folder. Then make these changes to your settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
Then run this command:
python manage.py collectstatic
You static file will be copied to New file created by django as assets.
and add to your HTML
{% load static %}
This is the URL that the browser will find your static files. It won't let Django know in which folder to find them inside your project root (`BASE_DIR)
STATIC_URL = '/static/'
Try using this instead to specify the directory you are storing the statics
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'website/static'),)
Also, make sure you are loading the statics in your template with the following template tag
{% load static %}
Update
The path to the CSS is also wrong on the html you should change it to:
<link href="/static/core/css/style.css" rel="stylesheet">
It's solved. The problem was the file structure. For some reason the static files was in a core-folder.
https://i.imgur.com/AnPACop.png
When i put the files directly in "static" it started working.
My english is not perfect, sorry in advance.
I'm in Django 3 and I had the same problem. This how I find what's wrong, with the help of everyone up me. Just consider this post like a note for me.
I do :
python3 manage.py runserver
At this moment I read the last line of the output. It was looking in a file that did'nt exist. I copied the path. Go in terminal and :
cd path/copied/before/static/base.css
File not found. At this moment I know what to do. Just follow the path and create the folder I need.
I know it's not a good practise but it's can help beginner.
Environment Info
Node version(node -v)
v5.7.0
Your site _config.yml
Hexo Configuration
url: http://akshaykadam.me/
root: /test/
theme: cactus-dark
Site located here. Checkout the console
The problem is it doesn't load /vendor/ folder at all on Github Pages.
I've set it up right & gh-pages branch contains all locations perfectly.
I have tried too much to debug it, as it works locally & doesn't work on gh-pages
Here is my compiled code
index.html
<link rel="stylesheet" href="/test/vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/test/vendor/meslo-LG/styles.css">
<link rel="stylesheet" href="/test/vendor/justified-gallery/justifiedGallery.min.css">
<link rel="stylesheet" href="/test/css/style.css">
<script src="/test/vendor/jquery/jquery.min.js"></script>
Still it logs Resource Not Found
Answering my own question !!
Actually Github excludes vendor/ & node_modules/ folder by itself
So I changed the name of vendor/ to lib/ & its working
I have tried following the solutions in the other stack overflow posts about serving Django static files in production, but I couldn't get them to work. My static files are located inside my django app folder (league).
My CSS files are not being properly loaded; I got the following error in the console in chrome:
Resource interpreted as Stylesheet but transferred with MIME type text/html
Uncaught SyntaxError: Unexpected token !
profile:5 Uncaught SyntaxError: Unexpected token !
I think that the css files are being interpreted as html files? I don't think the javascript files are being loaded properly either...
When I checked the source file on chrome and clicked on the link to the css file, they don't work. So I am guessing that the link to the css files don't work?
The links and scripts to load the css and javascript files are:
<head>
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="{% static 'league/css/bootstrap-theme.css' %}">
<link rel="stylesheet" href="{% static 'league/css/bootstrap-theme.min.css' %}">
<link rel="stylesheet" href="{% static 'league/css/bootstrap.css' %}">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="{% static 'league/js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'league/js/npm.js' %}"></script>
<!-- jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="{% static 'league/css/f-style.css' %}">
</head>
My the relevant files in my settings.py file are as follows:
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# 'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
STATIC_URL = '/league/static/'
SITE_ID = 1
STATIC_ROOT = BASE_DIR + '/league/static/'
The configuration file on my apache server is as follows:
<VirtualHost *:80>
ServerAdmin webmaster#localhost
DocumentRoot /var/www/html
Alias /static /home/ubunu/project/league/static
<Directory /home/ubuntu/project/league/static>
Require all granted
</Directory>
<Directory /home/ubuntu/project/fantasy>
<Files wsgi.py>
Require all granted
</Files>
</Directory>
WSGIDaemonProcess project python-path=/home/ubuntu/project:/home/ubuntu/project/myprojectenv/lib/python2.7/$
WSGIProcessGroup project
WSGIScriptAlias / /home/ubuntu/project/fantasy/wsgi.py
</VirtualHost>
Thanks!
Okay this is a pretty much trivial question. There two things you need to do.
Firstly, when you are using the local python django development server, then your static files are served simply by looking up the staticfiles in the app folder, and if you specified another folder for your static files in STATIC_DIRS, then it will look into that also.
But if you are serving your file on some other server, like Nginx or Herkou or Apache in your case, then you need to collect all your static files in another directory from where your Apache will read the static files from.
To achieve the above you need to do python manage.py collectstatic
As soon as you do this, all your static files will be collected in the folder specified by the STATIC_ROOT value in your settings.py
Now secondly, if your STATIC_ROOT as well as your STATIC_URL = '/league/static/' then technically, things won't work, as those two are for different purposes.
I suggest, create a new folder at the BASE directory level, say static_root_content and change your STATIC_ROOT = os.path.join(BASE_DIR, 'static_root_content')
Now when you'll run the python manage.py collectstatic all your static data will be collected in this folder from where Apache will look up static files.
Also STATIC_DIRS and STATIC_ROOT can't have the same value in your settings.py
See this article for a better explanation -> Differences between STATICFILES_DIR, STATIC_ROOT and MEDIA_ROOT
I am setting up a flask web-app running on gunicorn with nginx as the back proxy.
For the life of me I cant figure out how to link static files in the template.
It keeps giving a 404 error when I try to access the linked file from the web-page, the path showing in the address bar as 127.0.0.1/static/styles/main.css which is obviously wrong. Template engine I am using is the default jinja2.
Here's the stylesheet code that I am trying to link with(file --- main.html).
<link rel="stylesheet" href="{{ url_for('static', filename='styles/main.css') }}"/>
the folder structure is :
entry.py
/templates
main.html
/static
/styles
main.css
Do I need to make some changes to the nginx conf file or something?
Thanks.
Yes you will. In your server section of the nginx.conf file add something like this...
# serve static files - each entry is a separate folder
location ~ ^/(images|js|css|flash|media|static)/ {
root /var/www/html/Web;
expires 30d;
}
Hope this helps!