search

doabit / semantic-ui-sass

Semantic UI, converted to Sass and ready to drop into Rails & Compass.
MIT License
1.15k stars 190 forks source link

#140 Adds instructions for installing javascript in Rails 6 #142

Closed albertski closed 4 years ago

albertski commented 4 years ago

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?

infogrind commented 3 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.

doabit commented 3 years ago

@infogrind If you are using webpacker, i think you can use npm install semantic-ui

infogrind commented 3 years ago

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.

infogrind commented 3 years ago

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.

doabit commented 3 years ago

@infogrind I'll work on that later.

infogrind commented 3 years ago

That sounds great!

doabit commented 3 years ago

@infogrind i have published an npm package, https://github.com/doabit/semantic-ui-sass#ruby-on-rails-version-6

infogrind commented 3 years ago

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.

doabit commented 3 years ago

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'

infogrind commented 3 years ago

Sorry can you elaborate @doabit ? I am not sure which question you are answering.

doabit commented 3 years ago

  1. 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.

  2. 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

infogrind commented 3 years ago

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.

doabit commented 3 years ago

Updated, and i've created a demo https://github.com/doabit/semantic-ui-sass-rails6-demo

infogrind commented 3 years ago

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 @.***