Rails 5.1 + Webpack.... images in CSS? - McMap

About

Rails 5.1 + Webpack.... images in CSS?

Asked 6/5, 2017 at 19:34 Answered 1/8, 2017 at 9:34

Solved ruby-on-rails webpack ruby-on-rails-5 ruby-on-rails-5.1

C

1

8

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')

Circuity answered 6/5, 2017 at 19:34 Comment(1)

Have you tried to read the documentation ? – Orling 6/5, 2017 at 20:25

C

10

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

Cervantes answered 1/8, 2017 at 9:34 Comment(1)

I was able to load the image like this: background-image: url('~img/arrow-right-red.svg'); – Sakti 5/10, 2020 at 17:51

Recommended topics

#Godot #Unity #Godot 4.X #Mongodb

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

© 2022 - 2024 — McMap. All rights reserved.