使用 webpacker 在 Ruby on Rails 6 中添加库 css

Question

我正在尝试安装一个库，特别是通过 yarn 的引导表。我已经尝试过在以下链接Click 中找到的 gem，但它是旧版本，我无法让它工作。我已经阅读过，但是对于 Rails 6，最好使用 webpacker 来安装库。我现在的问题是我不知道如何插入 bootstrap-table css。

这是我的文件：

应用程序.js

import 'bootstrap'
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("jquery-ui")
import "@fortawesome/fontawesome-free/js/all";
require("leaflet");
require("easy-autocomplete")

require bootstrap-table

应用程序.scss

 *= require jquery-ui
 *= require_tree .
 *= require_self



 */

@import "leaflet/dist/leaflet";
@import "bootstrap/scss/bootstrap";
@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';
@import 'easy-autocomplete/dist/easy-autocomplete';

在 app/views/layouts/application.htlm.erb 我有：

<!DOCTYPE html>
<html>
  <head>
    <title>Resto</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <!-- This refers to app/javascript/stylesheets/application.scss-->
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>


  </head>

  <body>
    <p class = "notice" ><%= notice %> </p>
    <p class = "alert" ><%= alert %></p>
    <%= yield %>

  </body>
</html>

我在网上看到要插入由 yarn 安装的库的 css 我必须将以下代码粘贴到 application.html.erb 文件中：

<% = stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload'%>

所以我所做的就是将此代码放入文件中并编辑config/webpacker.yml 以确保它在顶部的默认部分中有extract_css: true。

我也在控制台中启动了bin / webpack-dev-server 命令，但出现了这个错误：

You want to set webpacker.yml value of compile to true for your environment

unless you are using the webpack -w or the webpack-dev-server.

webpack has not yet re-run to reflect updates.

You have misconfigured Webpacker's config/webpacker.yml file.

Your webpack configuration is not creating a manifest.

Your manifest contains:

{
  "application.js": "/packs/js/application-105ced549e0eccca7ef2.js",
  "application.js.map": "/packs/js/application-105ced549e0eccca7ef2.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-105ced549e0eccca7ef2.js"
      ],
      "js.map": [
        "/packs/js/application-105ced549e0eccca7ef2.js.map"
      ]
    }
  }
}

我希望不必使用所有这些配置，只需将 bootstrap-table css 文件添加到我的页面。运行这个bin / webpack-dev-server 命令我感觉不太好。这是因为我在运行这个命令后遇到了很多错误，我想避免让它一直运行。这是可能的？如果这不可能，我做错了什么？

Answer 1

如果您尝试安装 Gem，请在 Gemfile 中使用它：

gem 'bootstrap-table-rails', '~> 1.8', '>= 1.8.1'

更多信息请点击此处：https://rubygems.org/gems/bootstrap-table-rails/versions/1.8.1

然后在你的终端中运行：

bundle install

这应该会安装 Gem/Library。