No matching route found for custom theme css

I’m having trouble using custom themes. I’m trying to customize a theme following the guidelines found at http://fractal.build/guide/customisation/web-themes#template-customisation.

My current structure looks like this:

├── src/
    ├── assets/
    ├── components/
    ├── docs/
├── theme/
    ├── assets/
        ├── favicon.ico (override)
    ├── css/
        ├── mytheme.css (override)
    ├── views/
        ├── partials/
            ├── header.nunj (override)
fractal.js
gulpfile.js

My theme configuration in fractal.js is as follows:

const mandelbrot = require('@frctl/mandelbrot');

const myTheme = mandelbrot({
    favicon: '/assets/favicon.ico',
    skin: 'white',
    nav: ['docs', 'components'],
    styles: [
        'default',
        '/css/mytheme.css'
    ]
});

myTheme.addLoadPath(__dirname + '/theme');
fractal.web.theme(myTheme);

When running serve and opens http://localhost:3000, I get the following errors in the terminal:

✔ Fractal server is now running at http://localhost:3000
[11:16:18] Finished 'fractal:serve' after 2.14 s
✘ No matching route found for /css/mytheme.css
✘ Asset source not found

So basically, I get a 404 on these files. In addition, my custom header.nunj is not being used instead of the default one from mandlebrot.

Should the theme/-folder live inside src in this case, or does it not matter as I define the path in addLoadPath.

I’ve also studied the 24ways version of Fractal, but they just reference a css-file within the src/assets/styles/-folder see fractal.js. This is not really what I want. I’d rather separate overrides of the Web UI to it’s separate folder.

Any examples of github-repos with both custom css and overriding views would be much obliged.

For the record, I’m running: Node v.6.9.5 Fractal v.1.1.3 Mandelbrot v.1.1.0

[woldtwerk]

@Wursthandschuh Can you try adding a slash before the filename fractal.css ?

this resolved the issue. Thx for the instant reply

[LeBenLeBen]

@Wursthandschuh Can you try adding a slash before the filename fractal.css ?