ruby-on-railswebpackcookieconsent

Unable to load css files for cookieconsent with webpacker

I am trying to use the cookieconsent package with webpacker in ruby on rails 5.1.4.

My package.json is 

{
  "dependencies": {
    "@rails/webpacker": "3.5",
    "bootstrap": "^4.1.1",
    "cookieconsent": "^3.0.6"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"

I have added a cookieconsent.scss in app/javascript with the following content

@import 'cookieconsent/build/cookieconsent.min.css'

I am running webpack-dev-server which compiles successfully, including processing the cookieconsent.scss file viz

Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--2-2!node_modules/postcss-loader/lib/index.js??ref--2-3!node_modules/sass-loader/lib/loader.js??ref--2-4!app/javascript/cookieconsent.scss:
       [0] ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./app/javascript/cookieconsent.scss 10.7 kB {0} [built]
       [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]

In the head of the html page being loaded I have 

<%= stylesheet_pack_tag 'cookieconsent' %>

When I load the page, I get the following error message at this stylesheet_pack_tag line

Webpacker::Manifest::MissingEntryError - Webpacker can't find cookieconsent.css in /Users/Chris/Sites/golf_mentor/public/packs/manifest.json. Possible causes:
1. 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.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.css": "/packs/application-4aa426d9718df1187dbf816f0f19f567.css",
  "application.css.map": "/packs/application-4aa426d9718df1187dbf816f0f19f567.css.map",
  "application.js": "/packs/application-157f642ed5e88a31abbb.js",
  "application.js.map": "/packs/application-157f642ed5e88a31abbb.js.map",
  "counter.js": "/packs/counter-9d94c8ee2c39e62e654d.js",
  "counter.js.map": "/packs/counter-9d94c8ee2c39e62e654d.js.map"
}
:
  app/views/pages/temp.html.erb:3:in `block in _app_views_pages_temp_html_erb__4517159242875817520_70136616900600'
  app/views/pages/temp.html.erb:1:in `_app_views_pages_temp_html_erb__4517159242875817520_70136616900600'

How do I fix this?

Solution

  • I ended up solving this by installing cookieconsent using sprockets.

    However this post, https://rubyyagi.com/how-to-use-bootstrap-and-jquery-in-rails-6-with-webpacker/, although it does not deal specifically with cookieconsent does provide more information on how to install third party css files using webpacker.