Rails 5.1 + Webpack .... CSS 中的图像？答案

【问题标题】：Rails 5.1 + Webpack.... images in CSS?Rails 5.1 + Webpack .... CSS 中的图像？
【发布时间】：2017-10-05 02:20:00
【问题描述】：

我正在尝试弄清楚如何将 --webpack 方法用于一个非常简单的 Rails 5.1 应用程序。

我正在尝试使用它来管理 JS 和 CSS（特别是 scss）。

这太令人沮丧了，因为我在任何地方都找不到文档，即使是最基本的东西。

如何从我的 css 文件中链接图像？

像这样：background-image: asset-url('header.jpg')

【问题讨论】：

你试过阅读documentation吗？

标签： ruby-on-rails webpack ruby-on-rails-5 ruby-on-rails-5.1

【解决方案1】：

你可以使用默认的 webpack-rails 配置。请按照我在 cmets 中添加的路径进行操作

你的布局应该包含特殊标签：

 # 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';

应用程序.scss

#app/javascript/packs/stylesheets/application.scss
body{
  background-image: url('../img/arrow-right-red.svg');
}

图片的路径是：

app/javascript/packs/img/arrow-right-red.svg

【讨论】：

我能够像这样加载图像：background-image: url('~img/arrow-right-red.svg');