Using yarn with rails 5.1, I changed sytylesheet include to pack and getting an error

Question

New rails 5.1 application, installed bootstrap using yarn

yarn install boostrap

Now in my application.scss file I have this which includes the entire bootstrap css file currenly:

/*
 *= require_tree .
 *= require_self
 *= require bootstrap/dist/css/bootstrap
 */

My layout file looks like this:

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

Everything works fine when running

rails s

Now from what I understand to use webpack I have to change the includes to look like this:

<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application' %>

Now when I run rails server I get an error:

Webpacker can't find application.css in /dev/myapp/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.js": "/packs/application-8d71e5035f8940a9e3d3.js",
  "application.js.map": "/packs/application-8d71e5035f8940a9e3d3.js.map"
}

In another terminal I ran this, but it did't help:

./bin/webpack-dev-server

Am I suppose to run webpack-dev-server or is rails s enough? How can I test that both my CSS and javascript setup is using webpack, can I start writing ES5/6 now with this setup?

Reference:

webpack.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

could you post your `config/webpacker.yml` and your `app/javascripts/packs/application.js` maybe ? — Ben, Mar 17 '18 at 16:29
my rails app so far is default except for adding boostrap using yarn, i posted by webpack.yml above anyhow. — Blankman, Mar 17 '18 at 16:37

Ben · Answer 1 · 2018-03-19T08:45:06.617

You need to require css files located in node_modules from app/javascripts/application.js (or in any js files that get used by app/javascripts/application.js) rather than from app/assets/stylesheets/application.scss (see here, or see here).

[potentially inaccurate statement but that's how I can explain it] Because you don't have any css required in any files under app/javascripts, webpacker does not compile one /packs/application.css for you, so stylesheet_pack_tag breaks. It will once you do require some as explained

You could stick with your app/assets/stylesheets/application.scss (although idk how to require node_modules css from there), but then you should not use stylesheet_pack_tag in your layout, rather the og stylesheet_link_tag

Knowing that, one javascript pack with a css import will results in a css pack :

app/
  javascript/
    css/
      application.scss
      welcome.scss
    packs/
      application.js
      welcome.js

// in app/javascript/packs/application.js
import 'css/application.scss'

// in app/javascript/packs/welcome.js
import 'css/welcome.scss'

Could I have 2 main css files. I have 2 layouts and want to separate the 2 main areas of the site. — Blankman, Mar 17 '18 at 22:27
@Blankman were you able to get the thing working as you asked ? — Ben, Mar 21 '18 at 01:10

score 0 · Answer 2 · answered Mar 18 '18 at 11:31

I did configure an app bootstrap 4 with yarn and rails 5.1.

As my understanding your problem is not connected to yarn and bootstrap, also because I believe you need to require more files if you want to configure bootstrap with yarn, but I believe you have a problem with Webpacker.

Webpacker can't find application.css in /dev/myapp/public/packs/manifest.json

The first thing I notice, is that you do not have an application.css but scss, my second step was to search that error and find this solution (because I don't know Webpacker). It says that you need to include in your application.js the following line

import "path to application.css"

but the question was not accepted so I would rely on the rails/webpacker instructions

you should create an application.css in the folder app/javascripts/src/application.css

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  └── src:
  │   └── application.css
  └── images:
      └── logo.svg

then keep following the instructions from the above link

This is how I am requiring bootstrap 4 with yarn in my application.scss

@import 'bootstrap/scss/bootstrap';
@import 'main';

while my application.js is using a custom popper.js file that you can copy (if you need)

//= require jquery/dist/jquery
//= require rails-ujs
//= require popper-custom
//= require bootstrap/dist/js/bootstrap
//= require main
//= require turbolinks

I would be happy to provide more help

Bootstrap 4 works with my project, so you can find some useful information there on how to configure yarn + Bootstrap 4

Using yarn with rails 5.1, I changed sytylesheet include to pack and getting an error

2 Answers2