search

komposable / komponent

An opinionated way of organizing front-end code in Ruby on Rails, based on components
http://komponent.io
MIT License
427 stars 31 forks source link

how to import styles using an engine #92

Closed Jbern16 closed 6 years ago

Jbern16 commented 6 years ago

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 6 years ago

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.

Jbern16 commented 6 years ago

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!

Jbern16 commented 6 years ago

@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 https://github.com/rails/webpacker/issues/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!

Jbern16 commented 6 years ago

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 6 years ago

Thanks for the feedback. I think we should follow this issue https://github.com/rails/webpacker/issues/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.

Jbern16 commented 6 years ago

@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!