Build.json and custom CSS

ERPNext
1

I am trying to include some custom CSS to both the desk and to the website. I’ve forum post about creating a new app, adding a build.json file to the public folder. I’ve looked at frappe’s build.json and Im confused.

I’ve looked over the tutorial on how to build an app, but I must have skipped over this part, and can not find it in the documentation. Can some one please explain, why and where to put my apps css. and the format of the build.json file. Especially the key value pairs in build.json. They are not making sense to me.

Thank you,

Dave

2

As convention, put all the css in public/css and mention it in build.json which must be located here: ~/frappe_bench/apps/your_app/your_app/public/build.json, so it will be built with command bench build. If the build.json doesn’t exist, you can create one.

build.json. This will build css/custom_app.min.css from list of files.

{
	"css/custom_app.min.css": [
		"public/css/custom_app.css"
	]
}

e.g. apps/custom_app/custom_app/public/css/custom_app.css

div {
	color: #6c7680 !important;
	font-weight: bolder !important;
}

mention list of files to be loaded as css here
hooks.py

# for desk css
app_include_css = ["/assets/css/custom_app.min.css"]
# for web css
web_include_css = ["/assets/css/custom_app.min.css"]

if you wish to load file provided by third party without building it in build.json here is an example
keep file in public/js and mention it in hooks directly

18 Likes
3

Thank you for the very detailed and clear reply. I understand now. Is stuff like this in the documentation? I couldn’t seem to find it.

2 Likes