I read that from Odoo v.17 onwards, CSS files should be listed under the assets section of the manifest file, like so:
'assets': {
'web.assets_backend': [
'mydashboard/static/src/css/dashboard.css',
'mydashboard/static/src/js/dashboard.js',
],
},
But for some reason, the CSS is not loading or being applied to the templates.
The CSS works if it is included in a style block within the template itself, like so (truncated version):
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<template id="my_dashboard_meta" inherit_id="web.layout">
<xpath expr="//head" position="inside">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</xpath>
</template>
<template id="custom_dashboard" name="My Dashboard">
<t t-call="web.layout">
<style>
@font-face {
font-family: LCD;
src: url("/my_dashboard/static/src/fonts/lcd-regular-webfont.ttf");
}
html {
font-family: LCD, Times, serif;
}
.kanban-card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 30px;
}
.kanban-card img {
width: 200px;
height: 150px;
object-fit: cover;
flex-shrink: 0;
}
@media (max-width: 1200px) {
html {
overflow-y: scroll;
}
}
@media (max-width: 600px) {
html {
overflow-y: scroll;
}
.kanban-card img {
width: 240px;
height: 180px;
}
}
</style>
<div>
<t t-set="action_quotations" t-value="request.env.ref('sale.action_quotations', False)" />
<t t-if="action_quotations">
<div class="kanban-card kanban-4">
<a t-att-href="'/web#action=%s' % action_quotations.id">
<img src="/my_dashboard/static/src/images/sales_icon.png"
alt="Incoming Inventory" />
<div class="content">
<p>Pending Sales</p>
</div>
</a>
</div>
</t>
</div>
</t>
</template>
</odoo>
Any idea why?