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

Javascript Insert in Rails 6 #140

Closed ZephiroRB closed 3 years ago

ZephiroRB commented 4 years ago

How to include javascript in Rails 6?

doabit commented 4 years ago

In rails 6, you can still use app/assets/javascripts/application.js

//= require semantic-ui

or use with webpacker https://github.com/rails/webpacker#resolved, but i recommend to use yarn add semantic-ui,

jlebrijo commented 4 years ago

I am having the same problem:

yarn add semantic-ui is not a good idea because it is not automated, this is asking for a Gulp prompt that will break the production deployment in the future.

//= require semantic-ui raises the following error:

Uncaught ReferenceError: jQuery is not defined

Maybe this should be referenced in app/javascript/packs/application.js in order to find JQuery. But how?

Can you help, please?

doabit commented 4 years ago

@jlebrijo You can try to put <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> before javascript_include_tag.

jlebrijo commented 4 years ago

Great point @doabit , thanks!

Finally I could integrate Rails 6 with this gem. Just sharing my complete solution.

We have JQuery as prerequisite: yarn add jquery popper.js

After that we have to create $ and jQuery handlers into webpack config, at packs/application.js:

import JQuery from 'jquery';
window.$ = window.jQuery = JQuery;

Finally we have to import all files in the correct order at views/layouts/application.html.haml:

= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

Then we can do the usual imports. CSS at assets/stylesheets/application.scss:

@import "semantic-ui";

And Javascripts at assets/javascripts/application.js:

//= require semantic-ui
AlexanderCohen commented 4 years ago

Hey @doabit, I believe the Javascript file has moved in rails 6 from app/assets/javascripts/application.js to app/javascripts/packs/application.js

Edit: The above solution works for me - however it will require you to include the //= link application.js in the app/assets/config/manifest.js

Related to this comment:

In rails 6, you can still use app/assets/javascripts/application.js

//= require semantic-ui

or use with webpacker https://github.com/rails/webpacker#resolved, but i recommend to use yarn add semantic-ui,

doabit commented 3 years ago

https://github.com/doabit/semantic-ui-sass#ruby-on-rails-version-6-with-webpacker