My problem is with the inspinia.js file in rails 6.
I have the file inspinia.js and application.js in :-
app / javascript / pack
Try to integrate it in the following ways:
import 'inspinia'
require ("inspinia")
and in some other ways that didn't help me either.
If someone has already done it or knows how to do it, I would appreciate your help.
Well, you said that you've put it in the app/javascript/packs directory.
All you have to do is require it in application.js like:
require ("packs/inspinia");
You can also include it in the the index.html.erb like:
<%= javascript_pack_tag 'inspinia', 'data-turbolinks-track': 'reload' %>
Related
I'm fairly new to Rails 6 and Webpacker. The scenario is, I have added a package through yarn named 'slick-carousel'. And I am using
require('slick-carousel')
to require the package. And I have a custom js file 'custom-slick.js' which uses a function from the slick.js file in slick-carousel package. And I tried permutation and combination of both below -
import './slick-custom.js'
and
require('./slick.js');
Nothing seems to work and says Uncaught TypeError: $(...).slick is not a function.
My guess and I'm kind of sure that the 'custom-slick.js' is getting defined before the initialization of slick.js. I also tried to require only the package first and add the below before the end of body tag as well as import the package in the custom file. But doesn't seem to work.
<%= javascript_pack_tag 'slick-custom' %>
I have found two ways to make it work.
Paste the slick.js library in apps/javascripts/packs, add the custom-slick.js functions to slick.js and add below before the body tag in html.erb <%= javascript_pack_tag 'slick' %>
Require the library as usual. Put the custom-slick.js in app/assets/javascripts, add it to rails assets pipeline like Rails.application.config.assets.precompile += %w[slick-custom.js] and then <%= javascript_include_tag 'slick-custom' %>
Both of them works but are kind of messy. Is there any better and rails-webpacker-y way to achieve this?
I'm currently working on some basics of rails and I'm having real issues with getting any custom CSS loaded in to my app. At the moment I have a default application CSS file of:
...
*= require_tree .
*= require_self
*/
I have just one custom.css.scss file in /assets/stylesheets (I've also tried renaming it to just .css and no joy).
In the application layout I have the following default:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
I've also tried declaring the CSS directly in tags in the html.erb and that was fine so it's not something with the CSS code. I also tried pasting the CSS straight in to the application.css file and that didn't work.
EDIT:
I've narrowed down the issue to be realted to the the declaration of
<%= stylesheet_link_tag "application", media: "all" %> on the /layouts/application.html.erb. The page doesn't pick up the CSS from that code, but if I put that code directly in the controllers view, rather than the layout the CSS works.
Any help would be much appreciated!
Thanks
So, I'm learning to build Rails app, I've written the controller and everything looks fine, then moved to get the views.
As usual I downloaded a template and started to move it into my app (normal html template from html5up.net).
All JS files I've put them in app/assets/javascripts.
All CSS files I've put them in the app/assets/stylesheets.
and in the app/views/layouts/application.html.erb I've included them all using the javascript_include_tag and stylesheet_link_tag
so everything in theory should be fine.
In my routes file I got those 2 lines:
resources :users
root 'users#new'
When I start the server and go to the root route localhost:3000 everything is rendered smoothly and with awesome style, however if I try to access the very same page but from it's original route localhost:3000/users/new somewhy the html I get doesn't include images and scripts, and the style is messed up (probably because no images/js), same goes for other pages from the users controller.
I tried putting the js/css files in public folder and linking to them but it gives exact same results.
Any idea what's going wrong and how to fix it?
I'm using Rails 4.2.1
Rather than including each of the stylesheets / javascripts directly, reference them within application.css and application.js respectively. This will add them to the asset pipeline - making the application run faster amongst other things (http://guides.rubyonrails.org/asset_pipeline.html).
So instead of referencing the scripts directly in application.html.erb, just ensure application.html.erb has these to lines in the head section:
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
Then check that application.css exists in app/assets/stylesheets and that it includes this line:
*= require_tree .
This tells it to include every .css file that is within the assets/stylesheets directory (alternatively reference each file individually with a require statement)
Similarly, ensure app/assests/javascripts/application.js includes:
//= require require_tree .
And that the javascript files are in app/assets/javascripts
Put all the images in app/assets/images
Change all the references to the images in CSS files from
url("images/example.png")
to
url(image_path("example.jpg"))
or
image-url("example.png")
And you should be good to go... the rails helpers should handle the relative path issues that it looks like you've been experiencing.
I know it's kinda old, but forgot to post the answer for this.
The problem was in the view html codes, the <%= stylesheet_link_tag "application", media: "all" %> was inside a <noscript> tags so they didn't work.
I'm fairly new to Rails (and web development in general) and I'm trying to add the Get Shit Done UI Kit (GSD) to my existing Rails-Bootstrap app (with Bootstrap already installed using the bootstrap-rails gem).
These are the files that come with this particular kit:
x_get_shit_done
--assets
---css
-----demo.css
-----get-shit-done.css
-----gsdk-base.css
-----gsdk-checkbox-radio-switch.css
-----gsdk-sliders.css
---img
---js
-----custom.js
-----get-shit-done.js
-----gsdk-bootstrapswitch.js
-----gsdk-checkbox.js
-----gsdk-radio.js
-----jquery-ui-1.10.4.custom.min.js
--bootstrap3
--index.html
This is how the stylesheets are called in the example template:
<link href="bootstrap3/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/get-shit-done.css" rel="stylesheet" />
<link href="assets/css/demo.css" rel="stylesheet" />
But in my Rails apps, stylesheets/JS are called like so:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
I understand that there is some magic that Rails provides for adding stylesheets to projects this way, but I don't quite understand how that magic applies to adding new custom stylesheets.
And additionally, all CSS files in my app (following a tutorial) are Sass (.css.scss), all HTML files are embedded Ruby (.html.erb), and Bootstrap is already installed using the bootstrap-rails gem.
Do I need to somehow convert the CSS files with UI kit to Sass? There's no gem for GSD so it seems necessary to add all of the styles manually, which is what I think is throwing me off here.
Thanks for your patience with this nooby's question :)
First of all read about Rails' Asset Pipeline and you find the answers for all your questions.
In your case, you need to put css files to vendor/asssets/stylesheets and js files to vendor/assets/javascripts. Then add them with require to application.css and application.js.
application.css:
*= require_directory get_shit_done # this is vendor/assets/stylesheets/get_shit_done
*= require_tree .
*= require_self
application.js:
//= require_directory get_shit_done
//= require_tree .
After this all css and js files will be loaded to <head> automatically.
Then, you check index.html and change your application.html.erb according to it: add <meta>'s, some basic div's, such as div.container in Bootstrap and so on. You don't need to add css and js files to layout, cause you've already done it with Asset Pipeline.
But I strongly recommend you to read about Asset Pipeline, .erb format and some other rails basics. It's better to start from them, not from implementing css framework to the project.
#Allen I'm part of Creative Tim, we made the Get Shit Done UI Kit and I would like to tell you that we've got a collaboration with a Ruby on Rails professional and we created a Get Shit Done UI Kit Rails Gem
Please check it, it is hosted on the official rubygems.org and let us know if everything is working as expected.
Best,
Alex
Rails 4.
Hi I d'like to add an lightbox to my application. I have follow the step-by-step instructions for Lightbox but my photo gallery doesn't respond at all
I have called (:all : application) the file necessary in my application.html.erb. My view is ok I think the problem reside in my way to call the vendor files.
I place all the lightbox files under vendor/assets/javascript and vendor/assets/stylesheets respectively. I did create an vendor/assets/images for the Lightbox images file (close icon...) and my application.html.erb contains:
stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
javascript_include_tag "application", "data-turbolinks-track" => true
Nothing show up properly concerning my photo-gallery. any help?
in your /assets/javascripts/application.js add this line after //= require jquery:
//= require lightbox-2.6.min
same thing for your /assets/stylesheets/application.js add this line :
//= require lightbox
I added the following line that #medBo told me too.
But for the IMG folder I placed it inside the public folder.
add '.scss' to the lightbox.css file and edit
line 195 to 'background: url(/img/close.png) top right no-repeat;'
then you can keep the img folder inside the assets folder where it belongs if you are going to compile assets localy
Probably you can take a look at these gems:
Lightbox Rails
Lightbox for Bootstrap 3