Styles like behaviours

[jowan]

I really like the way behaviours work out of the box. Just to summarise:

• I can create a component with an associated component.behaviour.js
• I use index.js to load this for Storybook, and webpack moves this file to wingsuit/behaviours/component.js
• I declare this component.js as being part of a library in my yml, and load it in my twig template (optional).

I would really like to do the same thing with SCSS. So, I want a naming convention, such as component.styles.scss (follows the JS), then I'd have to load that scss file in my index.js, and when I build:drupal, it gets added to wingsuit/styles/component.css. I can then load it in my library.

What do you think ? seems very useful to me, as a default behavior. I know CSS files in your component folders go to /wingsuit, but that is not quite right for me (a bit messy too :) I would really like them tucked away like behaviours, and also be preprocessed.

So question is - what is the best way to achieve this ? would need to add a gulp task first ? or can it be all done in webpack ?

thanks !

[jowan]

So after playing around (should have done this before - sorry), I can see two things.

1. any-file.scss does indeed get compiled to theme/wingsuit/any-file.css
2. importing any-file.scss in index.js does work, no need to preprocess
3. I can change the destination directory for any-file.css in '@wingsuit-designsystem/core/dist/server/presets/drupal.js' eg acc[`styles/${filename}`] = item;

However, this does not quite fit together. It only moves CSS not SCSS, and SCSS gets compiled to theme/wingsuit/. So continuing to link these two things together - 'name changing' and 'destination directory'.

[jowan]

ok - so I've got this working (after a fashion) but it has required hacking the drupal and postcss webpacks. I have saved those hacks as patches. So the question now is about amalgamating those webpacks - and for that, I'll open a new ticket :)