{"result":{"depiction_url":null,"edges":{"hasreference":{"objects":[{"created":"2026-10-07T11:13:17Z","object_id":{"id":1372,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_lib","title":"lib","uri":"https:\/\/zotonic.com\/id\/1372"},"seq":1}],"predicate":{"id":2774,"is_a":["meta","predicate"],"name":"hasreference","title":{"_type":"trans","tr":{"en":"Documentation reference"}},"uri":"https:\/\/zotonic.com\/id\/hasreference"}},"refers":{"objects":[{"created":"2026-10-07T11:13:08Z","object_id":{"id":1372,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_lib","title":"lib","uri":"https:\/\/zotonic.com\/id\/1372"},"seq":1000000},{"created":"2026-10-07T11:13:08Z","object_id":{"id":2971,"is_a":["text","documentation","developerguide"],"name":"developer_live_reload","title":{"_type":"trans","tr":{"en":"Reload the browser after source changes"}},"uri":"https:\/\/zotonic.com\/id\/2971"},"seq":1000000},{"created":"2026-10-07T11:13:08Z","object_id":{"id":3000,"is_a":["text","documentation","developerguide"],"name":"developer_changes_not_loaded","title":{"_type":"trans","tr":{"en":"A saved change does not appear"}},"uri":"https:\/\/zotonic.com\/id\/3000"},"seq":1000000}],"predicate":{"id":2409,"is_a":["meta","predicate"],"name":"refers","title":{"_type":"trans","tr":{"en":"Refers"}},"uri":"https:\/\/zotonic.com\/id\/refers"}},"subject":{"objects":[{"created":"2026-10-07T11:13:17Z","object_id":{"id":2554,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_how_to_guide","title":"How-to guide","uri":"https:\/\/zotonic.com\/id\/2554"},"seq":1},{"created":"2026-10-07T11:13:17Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-10-07T11:13:17Z","object_id":{"id":2620,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template","title":"Template","uri":"https:\/\/zotonic.com\/id\/2620"},"seq":3},{"created":"2026-10-07T11:13:17Z","object_id":{"id":2613,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_development_and_debugging","title":"Development and debugging","uri":"https:\/\/zotonic.com\/id\/2613"},"seq":4}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":2947,"is_a":["text","documentation","developerguide"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/2947"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"developer_asset_build","page_url":{"en":"https:\/\/zotonic.com\/docs\/2947\/build-and-serve-frontend-assets","x-default":"https:\/\/zotonic.com\/docs\/2947\/build-and-serve-frontend-assets"},"preview_url":null,"resource":{"body":{"_type":"trans","tr":{"en":"

Keep source files such as SCSS in priv\/lib-src<\/code> and compiled assets in priv\/lib<\/code>. Use an app-level Makefile that delegates asset work to the source directory's Makefile.<\/p>\n

Use tag#lib<\/code><\/a> to include library files using Zotonic's asset handling. Follow the existing base template's placement of styles and scripts so dependencies load in the expected order.<\/p>\n

After changing a source file, check the asset build output and the browser's network response. If the source changed but the served file did not, inspect the build step before flushing caches. Use Reload the browser after source changes<\/a> during development and A saved change does not appear<\/a> when changes remain invisible.<\/p>\n

For a first stylesheet, create priv\/lib\/css\/garden.css<\/code> with a visible rule for a class in your page, then include it through {% lib "css\/garden.css" %}<\/code> in the site's head block. Check the loaded response in the browser. A plain CSS file needs no SCSS compiler; when you introduce generated CSS, document the exact Makefile target beside its source.<\/p>"}},"category_id":{"id":317,"is_a":["meta","category"],"name":"developerguide","title":"Developer guide","uri":"https:\/\/zotonic.com\/id\/developerguide"},"content_group_id":{"id":339,"is_a":["meta","content_group"],"name":"default_content_group","title":{"_type":"trans","tr":{"en":"Default Content Group"}},"uri":"https:\/\/zotonic.com\/id\/default_content_group"},"created":"2026-10-07T11:12:56Z","creator_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"doc_editorial_bundle":true,"doc_editorial_edges":{"hasreference":[1372],"subject":[2554,2563,2613,2620]},"is_authoritative":true,"is_dependent":false,"is_featured":false,"is_protected":false,"is_published":true,"is_unfindable":false,"language":["en"],"modified":"2026-10-07T11:13:20Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"name":"developer_asset_build","pivot_geocode":null,"pivot_location_lat":null,"pivot_location_lng":null,"privacy":0,"publication_end":"9999-06-01T00:00:00Z","publication_start":"2026-10-07T11:12:56Z","slug":"build-and-serve-frontend-assets","summary":{"_type":"trans","tr":{"en":"Keep source files such as SCSS in priv\/lib-src and compiled assets in priv\/lib. Use an app-level Makefile that delegates asset work to the source directory's Makefile."}},"title":{"_type":"trans","tr":{"en":"Build and serve frontend assets"}},"title_slug":{"_type":"trans","tr":{"en":"build-and-serve-frontend-assets"}},"tz":"UTC","uri":null,"version":17,"visible_for":0},"uri":"https:\/\/zotonic.com\/id\/2947","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/2947"}},"status":"ok"}