I'm trying to integrate the Unite Gallery plugin into my rails app.
I add the plugin using Yarn and I reference the CSS and the JS in my application.
Everything is fine, except for the images that are referenced in the CSS file using url:
They are missing.
Rails look for the images in http://localhost:5000/images/play_button.png but of course images are in the node_modules folder.
How can I fix this?
This is strange, but I was able to get it working by just adding the extension to the end of the require.
So in my application.css I added .css to the end of each filename and boom!
#import "leaflet/dist/leaflet.css";
#import "leaflet-fullscreen/dist/leaflet.fullscreen.css";
Related
In migrating an app to Rails 5.1 for the first time, I'm experimenting with yarn instead of bower to manage frontend dependencies.
Everything is working great, and I'm able to include js and css files via the relevant application.js/css manifest files.
But, if these files depend on other resources (e.g., a directory of images, fonts, etc.), then Rails knows nothing about them.
Given a yarn package that includes:
/css
|-styles.css
/images
|-background.jpg
where
#styles.css
.background {
background-image: url(../images/background.jpg);
}
Logs are (obviously) showing
No route matches [GET] "/images/background.jpg"
How do I ensure that Rails is aware of these images in Yarn packages and properly compiles them?
Is this possible? Or am I overlooking something obvious?
I had the same problem. Following are some good references
https://edgeguides.rubyonrails.org/webpacker.html#using-webpacker-for-css
https://github.com/rails/webpacker/issues/349
Basically you need to do following things
Require the css file like a js file but with css extension included in /app/javascript/packs/application.js (Yes, require css in javascript)
Add <%= stylesheet_pack_tag "application" %> in layout file if already not there
If you don't already have it, create file (even if empty) /app/javascript/packs/application.scss
I would like to use social buttons as in this site: http://lipis.github.io/bootstrap-social/
It's going to be used in a Ruby on Rails project. I've already got Bootstrap working in the project, but I can't figure out how to add bootstrap-social.
Sorry for the noobish question, but I can't seem to get this right :(
You can use a gem: https://github.com/gavinkflam/bootstrap-social-rails
You can download separate files: bootstrap-social/bootstrap-social.css (or scss) and bootstrap-social/assets/js/docs.js from a repo in your link http://lipis.github.io/bootstrap-social/ and put them into your vendor/assets/stylesheets and vendor/assets/javascripts respectively.
I would download the Bootstrap-social project and copy the bootstrap-social to the project you are currently working on. After that you could say #import "$file"; in the application.css file.
I've downloaded a theme through wrapbootstrap but cannot figure out how to implement it. I assumed it was going to be just copying over the CSS and JS files but there seems to be much more to it.
The theme I have downloaded is https://wrapbootstrap.com/theme/awesome-admin-WB0663265
I have temporarily uploaded it onto Github here github.com/raycchan/temp (i'll remove this ASAP once I resolve it)
There are example templates here that have the generated .html file as well as the .html.erb files, and once I plug the erb files into my rails app it throws out errors like the ones below:
But it doesn't recognize these:
<%= data.page.title || "Bootstrap Admin" %> # data undefined
<%=partial 'dashboard-navigation'%> # partial undefined
Could someone instruct me step by step how to implement this bootstrap theme?
Thank you
It is really interesting to give a Rails soul to the nice template . A few simple steps:
copy .css to app/assets/stylesheets and .js to app/assets/javasripts
include the new files in the manifest files application.css and application.js
for font-awesome use this description
Then share the result with us .
I've got a Ruby on Rails app running with Bootstrap, which I installed using the gem twitter-bootstrap-rails.
I'd now like to integrate a new Bootswatch theme, but I'm having trouble figuring out what to do.
There are four possible downloads for each theme - a bootstrap.css file, a bootstrap.min.css file, a variables.less file, and a bootswatch.less. My question is: do I need to download and add them ALL to my ~/app/assets/stylesheets folder? or do I just need a subset of those? Currently inside ~/app/assets/stylesheets are just two files: application.css and boostrap_and_overrides.css.less. LESS really throws me off here so I'm totally confused with how it works and what I need to do to add new css files with this setup. Any help is appreciated.
You only need to download the bootstrap.css file, and rename it. The bootstrap.min.css is the same as the css file just a minified version of it. Less is just another way of writing css and accessing each property differently. Check out less. Add css file and begin integrating into html, also point html to new stylesheet.
Here's a twitter bootstrap gem for easy Bootswatch theme integration/customization for rails:
https://github.com/scottvrosenthal/twitter-bootswatch-rails
I'm trying to find the twitter-bootstrap files in my rails app ('bootstrap-sass', '2.0.0'), as I need to make a change directly to the bootstrap-responsive.css file, however, I can't find it.
I have bootstrap up and running, but can't seem to find the bootstrap files. How do I locate the bootstrap-responsive.css file?
Thank you!
The bootstap-sass gem uses the Rails 3.2 asset pipeline to inject the necessary stylesheets into your app. The actual stylesheet files are located in the gem installation directory, not in your project itself.
Depending on what you want to change, you can either:
Copy the _bootstrap-responsive.scss file from the gem into your app/assets directory and edit it there.
Customize the necessary Bootstrap variables before loading up Bootstrap in your application.scss file:
$btnPrimaryBackground: #f00;
#import "bootstrap";
Edit: Try looking under
app/assets/stylesheets
Here's an example
https://github.com/joliss/solitr/tree/master/app/assets/stylesheets
I'm not too familiar with the structure of rails apps but did you create a local copy or are you using the bootstrap files being hosted directly by github? You should be able to figure that out by checking one of your launched html pages and viewing the source, looking for something like
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
If it's a local page, there should be a directory somewhere in your rails app where the files are stored - perhaps there's a 'static' folder or something similar? Try file-searching for it, good chance you might find it.
(I use Django/Python for web projects but I'll look into Rails a bit and see if I find anything)