I'm trying to figure out how to use the --webpack
method for a very simple Rails 5.1 app.
I'm trying to use it for managing both JS as well as CSS (scss
, specifically).
This is so insanely frustrating though because there's no docs I can find anywhere how to do even the most basic stuff.
How do I link an image from within my css file?
Like this: background-image: asset-url('header.jpg')
You can use default webpack-rails configuration. Please follow paths that I added in comments
your layout should include special tag:
# app/views/layouts/application.html.erb
<head>
<%= javascript_pack_tag 'include_js_logic_here' %>
<%= stylesheet_pack_tag 'include_stylesheet_here' %>
</head>
include_stylesheet_here.js
# app/javascript/packs/include_stylesheet_here.js
import 'react-select/dist/react-select.css'; #exmple how to get styles from library
import './stylesheets/application.scss';
application.scss
#app/javascript/packs/stylesheets/application.scss
body{
background-image: url('../img/arrow-right-red.svg');
}
paths for images is:
app/javascript/packs/img/arrow-right-red.svg
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With