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

Question

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

我正在尝试使用它来管理 JS 以及 CSS（具体来说，scss）。

这实在是太令人沮丧了，因为没有文档我可以在任何地方找到如何做最基本的事情。

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

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

Answer 1

你可以使用默认的 webpack-rails 配置。请遵循我在评论中添加的路径

您的布局应包含特殊标记：

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

图片路径为：

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

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

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

ruby-on-rails

webpack

ruby-on-rails-5

ruby-on-rails-5.1