komposable/komponent

how to import styles using an engine

Jbern16 opened this issue · 6 comments

Hello,

I'm trying import styles from components that are hosted in an engine. I followed the directions for using engine.js, but receiving a webpacker can't find engine.css in /Users/jonathanbernesser/native/kompsetup/public/packs/manifest.json when doing the same instructions for stylesheet pack_tag.

If i create an engine.scssfile next to the engine.js file, and import it into the engine.js, the error disappears, but no styles from the engine are compiled. Does anyone have an example setup to make this a reality?

Thanks!

Spone commented

Hi @Jbern16,

Usually, you will get the webpacker can't find engine.css error when your pack doesn't return any CSS. When you add some rules to your CSS file, the error will disappear.

Is your project accessible somewhere? I would need to see the whole file structure to help you debug it.

hey @Spone, I've created a public repo of the frontend dir structure that is in our engine. https://github.com/Jbern16/frontend. I've also included the webpacker.yml from our host app. These components were almost entirely generated using komponent generators

Thanks!

@Spone Hi! still having an issue with this. Its not just styles, but any packs can not be imported from my engine. I don't think it's as simple as including the engine/frontend in resolved paths. I've found this issue in webpack rails/webpacker#21, that makes it seems that it is relatively impossible to compile packs from an engine right now. I am new to webpack so I may be conflating things...

Any help would be great!

I was able to resolve this by creating a symlink to vendor/frontend from my gem root path on initialize. Then by importing the packs from vendor/frontend. Not ideal, but it works. I think overall if engines are not plugins inside of the main app, and rather installed as a gem, there is not yet a great way to inject that into the node load path so webpack can find it.

Don't think this is an issue for Komponent, but rather webpacker.

Spone commented

Thanks for the feedback. I think we should follow this issue rails/webpacker#348 to see if a recommended approach emerges.

We also did some experiments with NPM packages (basically installing your engine as a gem and a NPM package) and it works, but it's not very straight-forward.

@Spone I ended up moving away from the copying and made my frontend folder in my engine its own NPM package like you mentioned and a git submodule (so I can isolate that in npm/yarn as neither has good monorepo support yet). Yeah not super elegant but it works!