title: Add library css in Ruby on Rails 6 with webpacker
body: <p>I'm trying to install a library, specifically bootstrap-table via yarn. I had tried the gem found at the following link <a href="https://github.com/bjevanchiu/bootstrap-table-rails" rel="nofollow noreferrer">Click</a> 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.</p>
  <p>Here are my files:</p>
  <p>application.js</p>
  <pre><code>import 'bootstrap'
  require(&quot;@rails/ujs&quot;).start()
  require(&quot;turbolinks&quot;).start()
  require(&quot;@rails/activestorage&quot;).start()
  require(&quot;channels&quot;)
  require(&quot;jquery&quot;)
  require(&quot;jquery-ui&quot;)
  import &quot;@fortawesome/fontawesome-free/js/all&quot;;
  require(&quot;leaflet&quot;);
  require(&quot;easy-autocomplete&quot;)
  
  require bootstrap-table
  </code></pre>
  <p>application.scss</p>
  <pre><code> *= require jquery-ui
   *= require_tree .
   *= require_self
  
  
  
   */
  
  @import &quot;leaflet/dist/leaflet&quot;;
  @import &quot;bootstrap/scss/bootstrap&quot;;
  @import '@fortawesome/fontawesome-free/css/fontawesome.css';
  @import '@fortawesome/fontawesome-free/css/all.css';
  @import 'easy-autocomplete/dist/easy-autocomplete';
  </code></pre>
  <p>In app/views/layouts/application.htlm.erb I have:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Resto&lt;/title&gt;
      &lt;%= csrf_meta_tags %&gt;
      &lt;%= csp_meta_tag %&gt;
  
      &lt;%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %&gt;
      &lt;!-- This refers to app/javascript/stylesheets/application.scss--&gt;
      &lt;%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %&gt;
  
  
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;p class = &quot;notice&quot; &gt;&lt;%= notice %&gt; &lt;/p&gt;
      &lt;p class = &quot;alert&quot; &gt;&lt;%= alert %&gt;&lt;/p&gt;
      &lt;%= yield %&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>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:</p>
  <pre><code>&lt;% = stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload'%&gt;
  </code></pre>
  <p>So what I did was put this code in the file and I edited <code>config/webpacker.yml</code> to be sure it has <code>extract_css: true</code> in the default section at the top.</p>
  <p>I also started the <code>bin / webpack-dev-server</code> command in the console but I got this error:</p>
  <pre><code>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:
  
  {
    &quot;application.js&quot;: &quot;/packs/js/application-105ced549e0eccca7ef2.js&quot;,
    &quot;application.js.map&quot;: &quot;/packs/js/application-105ced549e0eccca7ef2.js.map&quot;,
    &quot;entrypoints&quot;: {
      &quot;application&quot;: {
        &quot;js&quot;: [
          &quot;/packs/js/application-105ced549e0eccca7ef2.js&quot;
        ],
        &quot;js.map&quot;: [
          &quot;/packs/js/application-105ced549e0eccca7ef2.js.map&quot;
        ]
      }
    }
  }
  </code></pre>
  <p>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 <code>bin / webpack-dev-server</code> 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?</p>