Does hanami-assets process .scss files out of the box ?

questions
1

Hi there,
I am testing hanami 2.1 for a fews weeks now. I like its architecture together with ROM-db. As it is a young framework, it is difficult to find answers when a problem occur. Here is mine :

For two days now I try to have Hanami processing my .scss files. It seems not to do it out of the box but some tells it does.
My actual code is rather simple :

# app/assets/css/app.css
@import './common.scss';

body {
/* some css code */
}

# app/assets/css/common.scss
// some scss code

When I run bundle exec hanami dev, it returns an error :

[ERROR] No loader is configured for ".scss" files: app/assets/css/common.scss
     app/assets/css/app.css:1:8:
       1 │ @import "common.scss";
          ╵               ~~~~~~~~~~~~~
   1 error
 [watch] build finished

What am I doing wrong ?
Is a esbuild plugin (like esbuild-sass-plugin) needed ? If so, how do I insert it in the hanami-assets process ?
Please help…

2

Hi @FranckP, thanks for trying Hanami! I’m glad you like it :slight_smile:

You’re right in assuming you’ll need an esbuild plugin to work with scss files. See this page from our guides for how to customise the esbuild config.

Here’s a code example to show you how to add your own plugins (in this case I was experimenting with the postcss plugin):

import * as assets from "hanami-assets";
import postcss from "esbuild-postcss";

await assets.run({
   esbuildOptionsFn: (args, esbuildOptions) => {
     const plugins = [...esbuildOptions.plugins, postcss()];

     return {
       ...esbuildOptions,
       plugins,
     };
   },
 });

I hope this helps. Let us know once you figure out your config, since I’m sure that’ll be helpful to others too!

3

Wonderful !
I feel ashame because I read the guide page you refer to… but I really am not familiar with these js things.

Thanks a lot.
Franck.

4

For any fellow user that has the same problem; I’ve shared my solution here Hanami 1.3 > Hanami 2.2 : tips & notes about my journey - #2 by inouire

same as what Tim did, just a bit more detailed