Importing and bundling app CSS and node_module CSS files in Frappe 15+

Frappe Framework App Development
, ,
1

Problem

I have been looking around for the past couple of days into elegant ways to bundle custom app CSS and import node_modules CSS into my custom app. It is a problem for beginner developers if they ever come across this situation. The reason is bench build doesn’t always play nice with app CSS files; and it doesn’t like to roam around looking for node_modules CSS files.

Why would I want to bundle CSS?

Jinja has a dynamic hash rendering command for bundles! So in the template all you have to do is have this block:

.
.
.
{% block style %}
  {{ include_style('filename.bundle.css') }}
{% endblock %}

{% block script %}
  {{ include_script('filename.bundle.js') }}
{% endblock %}

Which makes it very convenient.

My findings

Custom app CSS bundling

Changing the filename.bundle.css to filename.bundle.scss and @import local public/css/ files like there is no tomorrow. You don’t need to include the extension in the import line: @import './filename' for filename.css.

Node CSS import and bundling

For node module CSS files, append the full path of the file from the module down, e.g. if files resides in node_modules/module_name/path/to/module_name.min.css then you will do @import 'module_name/path/to/module_name.min'

1 Like