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

问题描述

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

这是我的文件：

application.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

application.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>

我在互联网上读到要插入纱线安装的库的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命令的感觉不太好。这是因为在运行此命令后出现很多错误，我希望避免始终保持运行状态。这是可能的？如果那不可能，那我在做什么错了？

解决方法

如果您要安装Gem，请在Gem文件中使用它：

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

然后在您的终端中运行以下命令：

bundle install

那应该安装Gem / Library。

ruby-on-rails webpack webpack webpack webpack-dev-server yarnpkg