I'm trying to install a library, specifically bootstrap-table via yarn. I had tried the gem found at the following link Click but it is an old version and I was unable to get it to work. I have read around that however with Rails 6 it is better to use the webpacker to install libraries. My problem now is I can't figure out how to insert bootstrap-table css.
Here are my files:
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';
In app/views/layouts/application.htlm.erb I have:
<!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>
I read on the internet that to insert the css of the libraries installed by yarn I have to paste the following code in application.html.erb file:
<% = stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload'%>
So what I did was put this code in the file and I edited config/webpacker.yml to be sure it has extract_css: true in the default section at the top.
I also started the bin / webpack-dev-server command in the console but I got this error:
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"
]
}
}
}
I would like not to have to use all this configuration but to just add the bootstrap-table css file to my page. I don't feel like good in running this bin / webpack-dev-server command. This is because I had a lot of errors after running this command and I would like to avoid having to keep it running all the time. It's possible? If that's not possible, what am I doing wrong?
