I work on a project of Django with bootstrap 5 sass
when I run my project, CSS effects do not apply.
then I tried to (npm run scss) to discover the problem
i got this error message:
Rendering Complete, saving .css file...
Error: EEXIST: file already exists, mkdir 'C:\Users\10\Desktop\Projects\Markvira\static\css\base.css'
This is My project Files:
base.html
{% load static %}
<!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.0">
<title>Markvira</title>
<link rel="shortcut icon" type="image/jpg" href="{% static 'images/base/favicon.ico' %}"/>
<link rel="stylesheet" type="text/css" href="{% static './css/base.css' %}">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!------>
<!--Navbar-->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
</nav>
</header>
<!--Navbar-->
<!----->
<main>
{% block content %}
{% endblock %}
</main>
<footer>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "node-sass --watch ./static/scss/base.scss -o ./static/css"
},
"dependencies": {
"bootstrap": "^5.0.0-beta3",
"node-sass": "^6.0.0"
}
}
base.scss
#import "custom_bootstrap";
#import "navbar";
html, body {
margin: 0;
height: 100%;
background-color: black;
}
project tree
can you help in the following:
why base.css file does not show effects in my website?
should i after installing (npm i bootstrap#next) to include links by jsDelivr, because i noticed some effects did not show till i include jsDelivr bootstrap links?
Thank you
Related
I am attempting to serve a django app with a vue frontend and need some help configuring the static files.
The Question TLDR:
How do I get Django to recognize this built path as an attempt to reach a static file, or alternatively, how do I modify the post-build injection path on the Vue side to match the current Django static-file settings?
Django serves the built index.html from vue, however it can not find the static files (scripts/css) that are autoinjected from the build process due to the path being "absolute". I have modified the vue.config.js to not autoinject the scripts (since they will need {% static %} during the build, and the template index.html to add them in appropriately.
My directory structure is as follows:
- Root
- app
- migrations
- templates
- app (outputDir)
- index.html (Built from vue)
- base.html
- templateFolder1
- templateFolder2
- various .py files
- assets (assetsDir)
- css
- static files
- js
- static files
- frontend
- public
- index.html (Template for build for vue)
- src
- assets
- components
- App.vue
- main.js
The build is run from the frontend directory, with --no-clean to not delete my django templates folder on build.
Here is my workaround for adding {% static %} tags to the built index.html. I realize I am breaking the convention vue has that assetsDir is a subdirectory of outputDir, and I am not opposed to adding another staticfile dir to the settings.py to match the convention (although my issue is still the same).
vue.config.js
publicPath: isProd ? '/app/' : '/',
outputDir: __dirname + '/../app/templates/app',
assetsDir: "../../../assets",
indexPath: './index.html',
configureWebpack: {
...
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
favicon: __dirname + '/../assets/img/favicon/favicon.ico',
inject: false,
minify: false
})
],
},
public/index.html
{% load static %}
<!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.0">
<title>MAPP Remote</title>
<link rel="shortcut icon" href="{% static '<%= htmlWebpackPlugin.files.favicon %>' %}">
<% for (key in htmlWebpackPlugin.files.css) { %> <link rel="stylesheet" href="{% static '<%= htmlWebpackPlugin.files.css[key] %>' %}"> <% } %>
</head>
<body>
...
<div id="app"></div>
<!-- built files will be auto injected -->
<% for (key in htmlWebpackPlugin.files.js) { %> <script type="text/javascript" src="{% static '<%= htmlWebpackPlugin.files.js[key] %>' %}"></script> <% } %>
</body>
</html>
The built index.html:
app/templates/app/index.html
{% load static %}
<!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.0">
<title>MAPP Remote</title>
<link rel="shortcut icon" href="{% static '/app/favicon.ico' %}">
<link rel="stylesheet" href="{% static '/app/../../../assets/css/chunk-vendors.0ba3e87d.css' %}"> <link rel="stylesheet" href="{% static '/app/../../../assets/css/app.fb012fc8.css' %}">
</head>
<body>
...
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="{% static '/app/../../../assets/js/chunk-vendors.6a3b11f1.js' %}"></script> <script type="text/javascript" src="{% static '/app/../../../assets/js/app.45295baa.js' %}"></script>
</body>
</html>
My django settings.py configuration for static files:
Settings.py
...
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = "/static/"
STATICFILES_DIRS = [os.path.join(BASE_DIR, "assets")]
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
...
The way my static file finders are configured via Django requires modification to the built script/css paths inside of app/templates/app/index.html.
In stead of <script src="{% static '/app/../../../assets/js/chunk-vendors.6a3b11f1.js' %}">
The path currently needs to be <script src="{% static 'js/chunk-vendors.6a3b11f1.js' %}">
Changing the assetsDir path in vue.config.js to match the Vue convention of having assets be a subdirectory of outputDir results in a similar issue in which the path is 'app/assets/js/...' rather than 'js/...'
I decided to adjust the path that is loaded into the template during the Vue build by modifying public/index.html file as well as the vue.config.js options. I declared a const asset_dir = '/asset/dir in vue.config.js and then added this as an extra option to the HtmlWebpackPlugin to pull it into the template. Lastly, I substring the path for the static files by the length of the unnecessary portion of the path.
vue.config.js
const asset_dir = "../../../assets"
module.exports = {
publicPath: isProd ? '/app/' : '/',
outputDir: __dirname + '/../app/templates/app',
assetsDir: asset_dir,
indexPath: './index.html',
configureWebpack: {
...
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
inject: false,
minify: false,
assetsDir: asset_dir
})
],
}
}
public/index.html
{% load static %}
<% if (htmlWebpackPlugin.options['assetsDir'] !== undefined) { %> <% var assetDirLength = htmlWebpackPlugin.options['assetsDir'].length + htmlWebpackPlugin.files.publicPath.length + "/".length%> <% } %>
<!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.0">
<title>MAPP Remote</title>
<link rel="shortcut icon" href="{% static 'img/favicon/favicon.ico' %}">
<% for (key in htmlWebpackPlugin.files.css) { %> <link rel="stylesheet" href="{% static '<%= htmlWebpackPlugin.files.css[key].substr(assetDirLength) %>' %}"> <% } %>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- Pulled from htmlWebpackPlugin Docs -->
<!-- https://github.com/jaketrent/html-webpack-template/blob/86f285d5c790a6c15263f5cc50fd666d51f974fd/index.html -->
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="{% static '<%= htmlWebpackPlugin.files.chunks[chunk].entry.substr(assetDirLength) %>' %}"></script>
<% } %>
</body>
</html>
I am trying to include a template - header.html into the main.html file. The header.html has its own css file. I have one choice- to link the css into the head of header.html and then include it. But it makes the code looks messier with many html tags in the same document. For instance, if I need to include another footer.html, again additional html tags will come to the main.html.
Another option is to simply put all the styles into one main.css file and include that in the base.html. But again it makes main.css harder to edit.
Is there any better solutions?
Thanks
Make a folder as templates under root directory of your project and add below line in settings.py file to define the template path.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], #mainly this line
'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',
],
},
},
]
and
STATIC_URL = '/static/'
STATIC = os.path.join(BASE_DIR, 'static')
After it make base.html file and enter all the js and css file over here. That will reflect to all the project.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<title>Test </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Test">
<link rel="shortcut icon" type="image/png" href="{% static 'images/small.png' %}"/>
<link rel="stylesheet" href="{% static 'css/lightbox.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/responsive.css' %}" type="text/css" />
<!-- more css files -->
</head>
<body>
{% block pagecontent %}
{% endblock %}
</body>
<script type="text/javascript" src="{% static 'js/asset/jquery-2.1.3.min.js' %}"></script>
<script src="static 'custom.js' %}"></script>
<!-- more js files -->
</html>
Okay, so I tried having a folder with static template elements accessible by all apps with two css files and one html file.
In settings.py I went to TEMPLATES and added: 'DIRS': os.path.join(BASE_DIR, 'static_files'),, as seen here (I edited out confidential info therefrom).
My template fragment topnav.html looks like this:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="w3.css">
<title>EvoLang</title>
</head>
<!-- Content will go here -->
<body>
<script src="myScript.js"></script>
<!-- Navigation -->
<nav class="topnav">
<ul class="topnav">
<li><a href="#">Entrywords
<li><a href="#">Sentences
</ul>
</nav>
<!-- / Navigation -->
</body>
Then, in previously working index.html in my app biblio looks like this:
{% extends "topnav.html" %} {# this enables using the top navigation bar #}
<p>Lorem ipsum</p>
What I get while accessing that page is the following error: [Errno 22] Invalid argument: 'E:\\MyProject\\myproject\\:\\biblio\\index.html'
I don't really get what is this \\:\\ part here.
I am using Django 1.11.2 with Python 3.6.
The DIRS setting should be a list. You are missing the square brackets and the trailing comma. Try:
'DIRS': [os.path.join(BASE_DIR, 'static_files')],
I want to add bootstrap template in my django app. I have downloaded it and kept in my static folder, then added its path in setting.py file as-
STATICFILES_DIRS = '/home/dc/my_django_apps/mutech_website/mutech/static/'
index.html of template is-
{% load staticfiles %}
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Freelancer - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Portfolio
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/freelancer.js"></script>
</body>
</html>
but still its not working. Any suggestion will be appreciated.
First configure the static files app, in setting.py by adding this setting
STATIC_URL = '/static/'
and make sure you have all your static files/folders inside a folder called static in the root or in static folder inside your app but make sure to run collectstatic command, then reference JS file from static files please use this syntax
<script src="{% static 'js/classie.js' %}"></script>
and for linking the CSS:
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
You will need 3 variables in your settings.py:
# Alias that will be written in the source code
STATIC_URL = '/public/'
# The actual folder where static files will be collected
STATIC_ROOT = 'static'
# Location of folders that will be added to static folder
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "folder_one", "folder_two", "static"),
)
After this, you'll need to run the command
python manage.py collectstatic
that will copy all static files to the STATIC_ROOT.
After this, you can use the static files in the template. Just add the tag to the template
{% load staticfiles %}
and use the static tag:
{% static 'folder_one/folder_two/path_to_static' %}
You can also use
... src="/public/folder_one/folder_two/path_to_static" ...
but if you want to change the alias one day, you'll have to change all of them... so, the first option is much better.
You'll have to check the static folder to see what path you'll have to use.
And django will write something like this
'/public/folder_one/folder_two/path_to_static'
When you make this work, have a look at bower and bower-installer
The first will download all packages that you need with a single command. The second will put all the files you need in a specific folder. This is quite good because you don't have to download one by one.
bower.json example
{
"name": "your_project_name",
"version": "1.0.0",
"authors": [
"you Name <your#email>"
],
"license": "License type",
"ignore": [
"**/.*",
"node_modules",
"bower_components"
],
"dependencies": {
"jquery": "latest",
"bootstrap": "latest"
},
"install": {
"path": "where/do/you/want/your/files"
}
}
Just add more dependencies and you're done. Then check bower-installer. It will copy only the files you need to a directory and not the whole source code for each package. when you're done you can remove the bower folder if you want and leave only the bower-installer folder.
motivation
I want to user bower (grunt) package of bootstrap in my django template folder. I am aware of django-bootstrap3 which ideally can be configured to use those "local"/deployed copies of bootstrap package.
For now, I need a plain example to work. So this is what I do
step 1: layout.html
I take an hello world template layout.html (from bootstrap docs page) and put it into templates folder registered within my django project:
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This example is valid for precompiled package.
step 2: bower
I run something like:
cd path/to/django/static/folder
bower install bootstrap
That creates a folder called bower_components
step 3: linking
?
PS
I am currently looking at yeoman board here to check if what is discussed is also a solution for me.
Use static files as documented on django page
{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}
In detail,
Layout.html will be changed to (assuming django 1.6):
<!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>{% block title %}title{% endblock %}</title>
{% load staticfiles %}
<!-- Bootstrap -->
<link href="{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
{% block content %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static "bower_components/bootstrap/dist/js/bootstrap.min.js" %}"></script>
</body>
</html>