ERPNext.com Frappe Cloud Support Partners Foundation Frappe School

A curious question regarding common assets

In /sites there is a directory /assets. In it there are css, js, etc.
The sites are using these as common assets.

Now, I wonder if I can:

  • create an app to hold custom css and js (let’s call it “common_app”)
  • minify them (by putting the links to build.json)
  • then add the minified links to other apps’ hooks (which this app is installed to sites).
  • without installing the common_app to the sites.

So basically this common_app only acts as css and js minified generator.
Example use case:

  • create a theme app (the “common_app”) with all the css and js.
  • but without having to install this theme app to sites.
  • just install a “link-app” (which holds the link to the minified css and js in /assets/css and /assets/js) to sites. Or put the links in other custom app installed.

The objective is less payload to install.

What is the caveat and what to consider?

1 Like

Great idea @rahy
I have followed your guides /comments in various threads, to manage CSS modifications through custom app .

Unfortunately couldn’t make it work … here are what i have done so far:

  • hooks.py ( app_include_css = “/assets/dobiz/css/dobiz.css” )
  • Build.json ( { “css/custom.min.css”: [ “/assets/dobiz/css/dobiz.css” ] }) * also tried public/css/dobiz.css
  • dobiz.css (button { background-color: #4CAF50 !important; })

Your assistant would be much appreciated

The hooks should point to the *.min.css file so it should be:

app_include_css = "assets/css/custom.min.css"

The build gets the css from the public directory in your app:

{"css/custom.min.css": ["public/css/dobiz.css"]}

If you want to use the css file directly in the hooks, you don’t need to minify it:

app_include_css = "/public/css/dobiz.css"
1 Like

:+1: Much appreciated … it works perfectly.

Is there any advantage to use scss instead of css.

Good to hear it works.
Unfortunately, I’m not the expert in scss… or css for that matter :smiley:

1 Like