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
Related
In our company, we have a shared npm package that contains images (SVG's mostly) that we share between applications to be able to update them easier when needed and keep them consistent.
I'm trying to use such an image in our rails app (more specifically in an ERB template), it sounds so simple to me but I can't get it to work. I researched this a lot online and could only find articles about images in SCSS/JS... but not how to load it as a normal image.
Can somebody point me to docs or give a simple example of how to do this? We use both sprockets and webpacker and still use Rails 5.1 (I know we need to update...)
npm packages are installed to <rails root>/node_modules, so nothing prevents you from doing:
# config/initializers/assets.rb:
Rails.application.configure do
# ...
config.assets.paths << Rails.root.join('node_modules')
# ...
end
(or just path to your single package)
and then working with these like with regular sprockets your_package/some_file.svg (adding to manifest/precompiled files may also be required), file paths will depend on your package structure.
Can't seem to figure out how to make the asset pipeline play nice AngularJS template files for components which like this:
app.component("chart", {
templateUrl: "./templates/chart_element_tpl.html",
controller: ChartElementController,
bindings: {
accounts: '='
}
});
I've looked at the various posts on this problem here but none of the suggestions seem to work. I always get the 404 error. One of them talks about upgrading sprockets to version 2.x but I am on version 4 already.
I have taken care to make sure my template has a different name than the javascript file as suggested in another post, but none of these things quite seems to do the trick.
FYI, the structure of the assets relevant assets directory is:
app/assetsjavascripts/chart_component.js
app/assets/javascripts/templates/chart_element_tpl.html
It does seem weird to me that an html template is stored in the javascripts folder but that seems to be the way people do it. I also made sure to include the directory in the applications.js manifest with
//= require_tree ./templates
I tried things like assets:clean and assets:precompile and yarn install and restarting the server but none of that seems to solve the problem.
I also have installed the angular-rails-templates gem and required it in application.js, also no help.
It does make sense to me that this is failing because the actual files are versioned etc. in the public directory, but not sure what to do about that so AngularJs can find my templates.
I'm trying to use the asset-pipeline with sass-rails. The problem I'm having is I have some CSS from libraries that I don't want to be compiled with the rest of the stuff.
I tried putting it in public/stylesheets, but when I try to include the file in my app I get Sprockets::Helpers::RailsHelper::AssetPaths::AssetNotPrecompiledError
What do I need to do to get Rails to look at the right place for static CSS files? Or is there some default place where I'm not putting it properly?
Edit: Double-checked and it doesn't work for JavaScripts either. Reading http://bibwild.wordpress.com/2011/12/08/jquery-ui-css-and-images-and-rails-asset-pipeline/ seems to suggest that Rails simply doesn't check the public dir by default, and we have to manually specify the path?
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'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)