Closed albertski closed 4 years ago
Do I correctly understand that this approach makes the Semantic UI JavaScript files under app/assets/javascript
redundant? And moreover that this means that with the Webpack approach in Rails 6, Gems no longer can include their own JavaScript assets, but have to rely on NPM modules to provide these?
NB, I saw that https://www.npmjs.com/package/semantic-ui-sass has been marked as deprecated.
@infogrind If you are using webpacker
, i think you can use npm install semantic-ui
Hey @doabit , thanks for the suggestion. I checked (using yarn), yarn add semantic-ui
does not work; there seem to be some incompatibilities (https://stackoverflow.com/q/55921442/319282 is one I encountered) but I did not dig deeper.
Instead, I tried yarn add semantic-ui-css
, which I found on https://react.semantic-ui.com/usage/. This indeed seems to work, I can just do an import "semantic-ui-css"
in app/javascript/packs/application.js
. Webpack will then use the JS sources installed in the package's directory in node_modules
.
I am hesitating to submit a pull request with the documentation change, as I am not 100% sure whether semantic-ui-css
is a package that will remain supported, and I'm not sure what's the difference from that package to semantic-ui
. But it does seem to solve the job.
Overall the solution is still not quite nice, as it essentially involves installing the entire Semantic UI sources twice, once through the Gem and once as an NPM module, the latter just so that Webpacker can find it. I posted a comment in rails/webpacker#57 asking for clarification whether this is the desired solution.
Got some good input in rails/webpacker#57. I am leaning to think that the nicest, most future-proof solution would actually be to distribute semantic-ui-sass as an NPM module. With Webpacker's CSS support, this would obviate the need for a dedicated Ruby Gem.
@infogrind I'll work on that later.
That sounds great!
@infogrind i have published an npm package, https://github.com/doabit/semantic-ui-sass#ruby-on-rails-version-6
Great, thanks, just tested it out.
I wasn't fully sure whether the README in its updated form still asks to include the Gem as well. The way I understand it, there are two options: a) you include both the Gem and the NPM package, b) you only use the NPM package.
If you still include the Gem, then the entry import '@doabit/semantic-ui-sass/src/scss/semantic-ui.scss'
in app/javascript/packs/application.js
is not needed.
I was trying to get option b) to work by doing it like in this commit (for CSS) but couldn't get it to work. Perhaps that approach actually only works for CSS, not SASS.
Anyway, I think you should remove the instructions to add import '@doabit/semantic-ui-sass/src/scss/semantic-ui.scss'
in the application.js
file.
If you only need javascript, add import '@doabit/semantic-ui-sass'
in app/javascript/packs/application.js
, if you only use npm package, you should add '@doabit/semantic-ui-sass/src/scss/semantic-ui.scss'
Sorry can you elaborate @doabit ? I am not sure which question you are answering.
if you use semantic-ui-sass
with webpacker without sprockets
, you can follow https://github.com/doabit/semantic-ui-sass#ruby-on-rails-version-6.
If you still use sprockets
, first, add @import 'semantic-ui';
to app/assets/stylesheets/application.scss
, then, yarn add jquery popper.js @doabit/semantic-ui-sass
and add import '@doabit/semantic-ui-sass'
to app/javascript/packs/application.js
Thanks for explaining in detail. Yes, this is also how I understood it, but from the current README.md this wasn't clear. My proposal would be to have a top level section in the README for each scenario. For example, a top level heading "Rails 6 with Webacker only", "Rails 6 with Sprockets", etc. to make it explicit. Otherwise folks might include more than needed, unnecessarily bloating the size of their assets.
Updated, and i've created a demo https://github.com/doabit/semantic-ui-sass-rails6-demo
Cool, thanks!
On Sun, 20 Jun 2021 at 18:50, Sean Deng @.***> wrote:
Updated, and i've created a demo https://github.com/doabit/semantic-ui-sass-rails6-demo
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/doabit/semantic-ui-sass/pull/142#issuecomment-864581948, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFPQIKBHRAUZWNZHVSIQ6DTTYL3ZANCNFSM4LPAAXIQ .
-- Marius Kleiner @.***
When working on a Rails 6 application, it isn't clear how to install the javascript portion. To solve #140, I updated the ReadMe to use Webpack. Let me know if you were thinking of a different approach?