access images in stylesheets with webpacker and rails 6

19 views
Skip to first unread message

fugee ohu

unread,
Dec 22, 2019, 10:15:59 AM12/22/19
to Ruby on Rails: Talk
How do I refer to images in stylesheets with rails 6/webpacker I always get can't resolve image.png from code like this:
.search_button

.search_button
{
  background:url(search.png);
}

Siyanda Maphumulo

unread,
Dec 22, 2019, 11:12:28 AM12/22/19
to Ruby on Rails: Talk
.search_button
{
  background:url(image_path("search.png"));
}

more information : https://guides.rubyonrails.org/asset_pipeline.html

fugee ohu

unread,
Dec 22, 2019, 1:27:45 PM12/22/19
to Ruby on Rails: Talk
Not
First, where should I put images Then, how to access them from app/javascripts/stylesheets/application.scss

Siyanda Maphumulo

unread,
Dec 22, 2019, 1:50:09 PM12/22/19
to Ruby on Rails: Talk
in the file app/assets/config/manifest.js

//= link_tree ../images
//= link application.css

I have images in app/assets/images/

background-image: url(image_path("bg/main.jpg"));


So this is similar to the way you would access images in previous versions of Rails, the linking of those assets is being handled by sprockets and not webpacker.

fugee ohu

unread,
Dec 22, 2019, 3:11:57 PM12/22/19
to Ruby on Rails: Talk
Webpacker is serving images in views, I just don't know how to do it in css

Ariel Juodziukynas

unread,
Dec 22, 2019, 6:05:15 PM12/22/19
to rubyonra...@googlegroups.com
Webpacker provides an `asset_pack_path` method https://github.com/rails/webpacker#usage

I guess you'll need to use a .css.erb file in order for that to work.

# something.css.erb

.search_button {
  background: url('<%= asset_pack_path('images/search.png') %>');
}

Lately you are asking A LOT of questions about webpacker for images and CSS, you don't really HAVE to change from Sprockets to Webpacker to update to rails 6, in fact, if you start a new rails app, it uses webpacker only for javascript assets, it's still using sprockets for css and images by default. Of course you are free to use webpacker for everything but maybe you have to follow webpack guidelines and start messing with loaders, check the webpack guide on packing images and using it for background image for example https://webpack.js.org/guides/asset-management/#loading-images

El dom., 22 dic. 2019 a las 17:12, fugee ohu (<fuge...@gmail.com>) escribió:
Webpacker is serving images in views, I just don't know how to do it in css

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/549cd10d-f440-4ca0-a3a5-51748c623e92%40googlegroups.com.

fugee ohu

unread,
Dec 22, 2019, 6:12:48 PM12/22/19
to Ruby on Rails: Talk

fugee ohu

unread,
Dec 22, 2019, 6:13:05 PM12/22/19
to Ruby on Rails: Talk
Sorry I mis-spelled the file name It's emitting now but not rendering I think my html is wrong

 <%= submit_tag "Search", class: submit_button %>

.search_button
{
background-image: url('../images/search-button.png');
}

fugee ohu

unread,
Dec 22, 2019, 7:57:38 PM12/22/19
to Ruby on Rails: Talk


On Sunday, December 22, 2019 at 6:05:15 PM UTC-5, Ariel Juodziukynas wrote:
Webpacker provides an `asset_pack_path` method https://github.com/rails/webpacker#usage

I guess you'll need to use a .css.erb file in order for that to work.

# something.css.erb

.search_button {
  background: url('<%= asset_pack_path('images/search.png') %>');
}

Lately you are asking A LOT of questions about webpacker for images and CSS, you don't really HAVE to change from Sprockets to Webpacker to update to rails 6, in fact, if you start a new rails app, it uses webpacker only for javascript assets, it's still using sprockets for css and images by default. Of course you are free to use webpacker for everything but maybe you have to follow webpack guidelines and start messing with loaders, check the webpack guide on packing images and using it for background image for example https://webpack.js.org/guides/asset-management/#loading-images

El dom., 22 dic. 2019 a las 17:12, fugee ohu (<fuge...@gmail.com>) escribió:
Webpacker is serving images in views, I just don't know how to do it in css

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rubyonra...@googlegroups.com.

Yea I know but I already see people saying why use both Also I wanna get used to this This is the first technology I'm getting in on the ground floor I feel, the time to learn/get used to using webpacker is now Moving all assets to webpacker is good practice for me Also using webpack-dev-server is a step forward, as soon as you save a file it recompiles and you get rewarded for doing something right when you save the file and the screen lights up green like a pinball machine rewards you for scoring

fugee ohu

unread,
Dec 22, 2019, 7:59:44 PM12/22/19
to Ruby on Rails: Talk


On Sunday, December 22, 2019 at 6:05:15 PM UTC-5, Ariel Juodziukynas wrote:
Webpacker provides an `asset_pack_path` method https://github.com/rails/webpacker#usage

I guess you'll need to use a .css.erb file in order for that to work.

# something.css.erb

.search_button {
  background: url('<%= asset_pack_path('images/search.png') %>');
}

Lately you are asking A LOT of questions about webpacker for images and CSS, you don't really HAVE to change from Sprockets to Webpacker to update to rails 6, in fact, if you start a new rails app, it uses webpacker only for javascript assets, it's still using sprockets for css and images by default. Of course you are free to use webpacker for everything but maybe you have to follow webpack guidelines and start messing with loaders, check the webpack guide on packing images and using it for background image for example https://webpack.js.org/guides/asset-management/#loading-images

El dom., 22 dic. 2019 a las 17:12, fugee ohu (<fuge...@gmail.com>) escribió:
Webpacker is serving images in views, I just don't know how to do it in css

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rubyonra...@googlegroups.com.

I saw one post where someone suggests renaming javascripts to "webpacker" and then creating javascripts and images folders under "webpacker" Wanna get a good handle on being able to put assets wherever I want
Reply all
Reply to author
Forward
0 new messages