Webpacker: Styles not loaded after upgrade to Rails 6 / Bundler 2

Created on 5 Mar 2019 · 15Comments · Source: rails/webpacker

Hello,
this may be a little weird but we're using Rails 6 beta2 for our project, everything was fine but just after we upgraded to bundler 2 styles are not loading anymore in our app.

This is our app structure for webpack:

├── javascript
│   ├── application
│   │   ├── javascripts
│   │   │   └── index.js.erb
│   │   └── stylesheets
│   │       ├── _variables_override.scss
│   │       ├── application.scss
│   │       ├── components
│   │       │   ├── _flash.scss
│   │       │   ├── _footer.scss
│   │       │   ├── _forms.scss
│   │       │   ├── _header.scss
│   │       │   └── index.scss
│   │       ├── index.js.erb
│   │       └── modules
│   │           ├── _base.scss
│   │           ├── _layout.scss
│   │           └── index.scss
│   └── packs
│       └── application.js

Inside packs/application.js:

import '../application/stylesheets/index.js.erb';
import '../application/javascripts/index.js.erb';

and our webpacker.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

staging:
  <<: *default

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

  # Cache manifest.json for performance
  cache_manifest: true

production:
  <<: *default

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

  # Cache manifest.json for performance
  cache_manifest: true

and layout file:

!!!
%html
  %head
    %meta{ :content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %meta{ :content => "width=device-width, initial-scale=1", name: "viewport" }/
    %title= t("website_title")
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_pack_tag "application", media: "all", "data-turbolinks-track": "reload"
    = javascript_pack_tag "application", "data-turbolinks-track": "reload"

    - if Rails.env.development?
      :css
        .translation_missing { color: red !important; }

  %body{ class: controller_name }
    .absolute-wrapper
      = render "shared/header"

      .content-wrapper
        = render "shared/flash"

        .content
          = yield

      = render "shared/footer"

Can someone tell me if I'm missing something?
Before upgrading to bundler 2 everything was working fine!

Source

mariogmz

Most helpful comment

Do I need to upgrade to v4 ?

Yes, nice catch @connorshea. @mariogmz see the end of this post.

Inside the layout we have = stylesheet_pack_tag "application", media: "all", "data-turbolinks-track": "reload", then inside the app/javascript/packs/application.js file:

I meant the resulting html that the browser sees.

it's important to mention that the app was created using Rails 5.2.2, and then upgraded to Rails 6.

Then you definitely need to follow the upgrade guide.

@jakeNiemiec if I enable hmr: true inside config/webpacker.yml it works, somehow, but it always been set to false

This is because the style-loader is injected, the .js is injecting your css into <head>. This will not work in production.

@mariogmz In short, start with:

bundle update webpacker
rails webpacker:binstubs
yarn upgrade @rails/webpacker --latest
yarn add webpack-dev-server@^3.1.14

Then follow the steps in: https://github.com/rails/webpacker/blob/master/docs/v4-upgrade.md#webpacker-upgrade-guide

That should fix you up nicely.

jakeNiemiec on 5 Mar 2019

🎉5 ❤4

All 15 comments

This might be the same as #1939, you’ll have to require bundler explicitly in the webpacker bin/ files.

connorshea on 5 Mar 2019

@connorshea already tried with no luck

mariogmz on 5 Mar 2019

Can you share the Gemfile and Gemfile.lock?

I don't think bundler 2 should have changed anything relevant to this working.

connorshea on 5 Mar 2019

Gemfile:

# frozen_string_literal: true

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "2.6.1"
gem "rails", "6.0.0.beta2"
gem "pg", ">= 0.18", "< 2.0"

gem "bootsnap", ">= 1.1.0", require: false
gem "devise"
gem "devise-i18n"
gem "haml-rails"
gem "kaminari"
gem "oj", "~> 3"
gem "money-rails", "~> 1"
gem "puma", "~> 3.11"
gem "role_model"
gem "sass-rails", "~> 5.0"
gem "turbolinks", "~> 5"
gem "uglifier", ">= 1.3.0"
gem "webpacker"

# Background Jobs Adapter
gem "sidekiq"

# Make Rails controllers step-by-step wizards
gem "wicked"

# Creditario Client
gem "creditario-client", source: "https://gem.fury.io/creditario/"

group :development, :test do
  gem "annotate"
  gem "awesome_print"
  gem "pry"
  gem "rubocop-rails_config"
end

group :development do
  gem "brakeman"
  gem "web-console", ">= 3.3.0"
  gem "listen", ">= 3.0.5", "< 3.2"
  gem "spring"
  gem "spring-watcher-listen", "~> 2.0.0"
  gem "letter_opener"
end

group :test do
  gem "capybara", ">= 2.15", "< 4.0"
  gem "capybara-selenium"
  gem "chromedriver-helper"
  gem "selenium-webdriver"
  gem "simplecov", require: false
  gem "webmock"
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Gemfile.lock

  remote: https://rubygems.org/
  remote: https://gem.fury.io/creditario/
  specs:
    actioncable (6.0.0.beta2)
      actionpack (= 6.0.0.beta2)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
    actionmailbox (6.0.0.beta2)
      actionpack (= 6.0.0.beta2)
      activejob (= 6.0.0.beta2)
      activerecord (= 6.0.0.beta2)
      activestorage (= 6.0.0.beta2)
      activesupport (= 6.0.0.beta2)
      mail (>= 2.7.1)
    actionmailer (6.0.0.beta2)
      actionpack (= 6.0.0.beta2)
      actionview (= 6.0.0.beta2)
      activejob (= 6.0.0.beta2)
      mail (~> 2.5, >= 2.5.4)
      rails-dom-testing (~> 2.0)
    actionpack (6.0.0.beta2)
      actionview (= 6.0.0.beta2)
      activesupport (= 6.0.0.beta2)
      rack (~> 2.0)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.0.2)
    actiontext (6.0.0.beta2)
      actionpack (= 6.0.0.beta2)
      activerecord (= 6.0.0.beta2)
      activestorage (= 6.0.0.beta2)
      activesupport (= 6.0.0.beta2)
      nokogiri (>= 1.8.5)
    actionview (6.0.0.beta2)
      activesupport (= 6.0.0.beta2)
      builder (~> 3.1)
      erubi (~> 1.4)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.0.3)
    activejob (6.0.0.beta2)
      activesupport (= 6.0.0.beta2)
      globalid (>= 0.3.6)
    activemodel (6.0.0.beta2)
      activesupport (= 6.0.0.beta2)
    activerecord (6.0.0.beta2)
      activemodel (= 6.0.0.beta2)
      activesupport (= 6.0.0.beta2)
    activestorage (6.0.0.beta2)
      actionpack (= 6.0.0.beta2)
      activerecord (= 6.0.0.beta2)
      marcel (~> 0.3.1)
    activesupport (6.0.0.beta2)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 0.7, < 2)
      minitest (~> 5.1)
      tzinfo (~> 1.1)
      zeitwerk (~> 1.3, >= 1.3.1)
    addressable (2.6.0)
      public_suffix (>= 2.0.2, < 4.0)
    annotate (2.7.4)
      activerecord (>= 3.2, < 6.0)
      rake (>= 10.4, < 13.0)
    archive-zip (0.12.0)
      io-like (~> 0.3.0)
    ast (2.4.0)
    awesome_print (1.8.0)
    bcrypt (3.1.12)
    bindex (0.5.0)
    bootsnap (1.4.1)
      msgpack (~> 1.0)
    brakeman (4.4.0)
    builder (3.2.3)
    capybara (3.14.0)
      addressable
      mini_mime (>= 0.1.3)
      nokogiri (~> 1.8)
      rack (>= 1.6.0)
      rack-test (>= 0.6.3)
      regexp_parser (~> 1.2)
      xpath (~> 3.2)
    capybara-selenium (0.0.6)
      capybara
      selenium-webdriver
    childprocess (0.9.0)
      ffi (~> 1.0, >= 1.0.11)
    chromedriver-helper (2.1.0)
      archive-zip (~> 0.10)
      nokogiri (~> 1.8)
    coderay (1.1.2)
    concurrent-ruby (1.1.4)
    connection_pool (2.2.2)
    crack (0.4.3)
      safe_yaml (~> 1.0.0)
    crass (1.0.4)
    creditario-client (0.1.0)
      multipart-post (= 2.0.0)
      oj (~> 3.0.0)
    devise (4.6.1)
      bcrypt (~> 3.0)
      orm_adapter (~> 0.1)
      railties (>= 4.1.0, < 6.0)
      responders
      warden (~> 1.2.3)
    devise-i18n (1.8.0)
      devise (>= 4.6)
    docile (1.3.1)
    erubi (1.8.0)
    erubis (2.7.0)
    execjs (2.7.0)
    ffi (1.10.0)
    globalid (0.4.2)
      activesupport (>= 4.2.0)
    haml (5.0.4)
      temple (>= 0.8.0)
      tilt
    haml-rails (2.0.0)
      actionpack (>= 5.1)
      activesupport (>= 5.1)
      haml (>= 4.0.6, < 6.0)
      html2haml (>= 1.0.1)
      railties (>= 5.1)
    hashdiff (0.3.8)
    html2haml (2.2.0)
      erubis (~> 2.7.0)
      haml (>= 4.0, < 6)
      nokogiri (>= 1.6.0)
      ruby_parser (~> 3.5)
    i18n (1.6.0)
      concurrent-ruby (~> 1.0)
    io-like (0.3.0)
    jaro_winkler (1.5.2)
    json (2.2.0)
    kaminari (1.1.1)
      activesupport (>= 4.1.0)
      kaminari-actionview (= 1.1.1)
      kaminari-activerecord (= 1.1.1)
      kaminari-core (= 1.1.1)
    kaminari-actionview (1.1.1)
      actionview
      kaminari-core (= 1.1.1)
    kaminari-activerecord (1.1.1)
      activerecord
      kaminari-core (= 1.1.1)
    kaminari-core (1.1.1)
    launchy (2.4.3)
      addressable (~> 2.3)
    letter_opener (1.7.0)
      launchy (~> 2.2)
    listen (3.1.5)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
      ruby_dep (~> 1.2)
    loofah (2.2.3)
      crass (~> 1.0.2)
      nokogiri (>= 1.5.9)
    mail (2.7.1)
      mini_mime (>= 0.1.1)
    marcel (0.3.3)
      mimemagic (~> 0.3.2)
    method_source (0.9.2)
    mimemagic (0.3.3)
    mini_mime (1.0.1)
    mini_portile2 (2.4.0)
    minitest (5.11.3)
    monetize (1.9.1)
      money (~> 6.12)
    money (6.13.2)
      i18n (>= 0.6.4, <= 2)
    money-rails (1.13.1)
      activesupport (>= 3.0)
      monetize (~> 1.9.0)
      money (~> 6.13.0)
      railties (>= 3.0)
    msgpack (1.2.7)
    multipart-post (2.0.0)
    nio4r (2.3.1)
    nokogiri (1.10.1)
      mini_portile2 (~> 2.4.0)
    oj (3.0.11)
    orm_adapter (0.5.0)
    parallel (1.14.0)
    parser (2.6.0.0)
      ast (~> 2.4.0)
    pg (1.1.4)
    powerpack (0.1.2)
    pry (0.12.2)
      coderay (~> 1.1.0)
      method_source (~> 0.9.0)
    psych (3.1.0)
    public_suffix (3.0.3)
    puma (3.12.0)
    rack (2.0.6)
    rack-protection (2.0.5)
      rack
    rack-proxy (0.6.5)
      rack
    rack-test (1.1.0)
      rack (>= 1.0, < 3)
    rails (6.0.0.beta2)
      actioncable (= 6.0.0.beta2)
      actionmailbox (= 6.0.0.beta2)
      actionmailer (= 6.0.0.beta2)
      actionpack (= 6.0.0.beta2)
      actiontext (= 6.0.0.beta2)
      actionview (= 6.0.0.beta2)
      activejob (= 6.0.0.beta2)
      activemodel (= 6.0.0.beta2)
      activerecord (= 6.0.0.beta2)
      activestorage (= 6.0.0.beta2)
      activesupport (= 6.0.0.beta2)
      bundler (>= 1.3.0)
      railties (= 6.0.0.beta2)
      sprockets-rails (>= 2.0.0)
    rails-dom-testing (2.0.3)
      activesupport (>= 4.2.0)
      nokogiri (>= 1.6)
    rails-html-sanitizer (1.0.4)
      loofah (~> 2.2, >= 2.2.2)
    railties (6.0.0.beta2)
      actionpack (= 6.0.0.beta2)
      activesupport (= 6.0.0.beta2)
      method_source
      rake (>= 0.8.7)
      thor (>= 0.20.3, < 2.0)
    rainbow (3.0.0)
    rake (12.3.2)
    rb-fsevent (0.10.3)
    rb-inotify (0.10.0)
      ffi (~> 1.0)
    redis (4.1.0)
    regexp_parser (1.3.0)
    responders (2.4.1)
      actionpack (>= 4.2.0, < 6.0)
      railties (>= 4.2.0, < 6.0)
    role_model (0.8.2)
    rubocop (0.65.0)
      jaro_winkler (~> 1.5.1)
      parallel (~> 1.10)
      parser (>= 2.5, != 2.5.1.1)
      powerpack (~> 0.1)
      psych (>= 3.1.0)
      rainbow (>= 2.2.2, < 4.0)
      ruby-progressbar (~> 1.7)
      unicode-display_width (~> 1.4.0)
    rubocop-rails_config (0.4.3)
      railties (>= 3.0)
      rubocop (~> 0.58)
    ruby-progressbar (1.10.0)
    ruby_dep (1.5.0)
    ruby_parser (3.12.0)
      sexp_processor (~> 4.9)
    rubyzip (1.2.2)
    safe_yaml (1.0.5)
    sass (3.7.3)
      sass-listen (~> 4.0.0)
    sass-listen (4.0.0)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
    sass-rails (5.0.7)
      railties (>= 4.0.0, < 6)
      sass (~> 3.1)
      sprockets (>= 2.8, < 4.0)
      sprockets-rails (>= 2.0, < 4.0)
      tilt (>= 1.1, < 3)
    selenium-webdriver (3.141.0)
      childprocess (~> 0.5)
      rubyzip (~> 1.2, >= 1.2.2)
    sexp_processor (4.11.0)
    sidekiq (5.2.5)
      connection_pool (~> 2.2, >= 2.2.2)
      rack (>= 1.5.0)
      rack-protection (>= 1.5.0)
      redis (>= 3.3.5, < 5)
    simplecov (0.16.1)
      docile (~> 1.1)
      json (>= 1.8, < 3)
      simplecov-html (~> 0.10.0)
    simplecov-html (0.10.2)
    spring (2.0.2)
      activesupport (>= 4.2)
    spring-watcher-listen (2.0.1)
      listen (>= 2.7, < 4.0)
      spring (>= 1.2, < 3.0)
    sprockets (3.7.2)
      concurrent-ruby (~> 1.0)
      rack (> 1, < 3)
    sprockets-rails (3.2.1)
      actionpack (>= 4.0)
      activesupport (>= 4.0)
      sprockets (>= 3.0.0)
    temple (0.8.1)
    thor (0.20.3)
    thread_safe (0.3.6)
    tilt (2.0.9)
    turbolinks (5.2.0)
      turbolinks-source (~> 5.2)
    turbolinks-source (5.2.0)
    tzinfo (1.2.5)
      thread_safe (~> 0.1)
    uglifier (4.1.20)
      execjs (>= 0.3.0, < 3)
    unicode-display_width (1.4.1)
    warden (1.2.8)
      rack (>= 2.0.6)
    web-console (3.7.0)
      actionview (>= 5.0)
      activemodel (>= 5.0)
      bindex (>= 0.4.0)
      railties (>= 5.0)
    webmock (3.5.1)
      addressable (>= 2.3.6)
      crack (>= 0.3.2)
      hashdiff
    webpacker (4.0.1)
      activesupport (>= 4.2)
      rack-proxy (>= 0.6.1)
      railties (>= 4.2)
    websocket-driver (0.7.0)
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.3)
    wicked (1.3.3)
      railties (>= 3.0.7)
    xpath (3.2.0)
      nokogiri (~> 1.8)
    zeitwerk (1.3.1)

PLATFORMS
  ruby

DEPENDENCIES
  annotate
  awesome_print
  bootsnap (>= 1.1.0)
  brakeman
  capybara (>= 2.15, < 4.0)
  capybara-selenium
  chromedriver-helper
  creditario-client!
  devise
  devise-i18n
  haml-rails
  kaminari
  letter_opener
  listen (>= 3.0.5, < 3.2)
  money-rails (~> 1)
  oj (~> 3)
  pg (>= 0.18, < 2.0)
  pry
  puma (~> 3.11)
  rails (= 6.0.0.beta2)
  role_model
  rubocop-rails_config
  sass-rails (~> 5.0)
  selenium-webdriver
  sidekiq
  simplecov
  spring
  spring-watcher-listen (~> 2.0.0)
  turbolinks (~> 5)
  tzinfo-data
  uglifier (>= 1.3.0)
  web-console (>= 3.3.0)
  webmock
  webpacker
  wicked

RUBY VERSION
   ruby 2.6.1p33

BUNDLED WITH
   2.0.1

mariogmz on 5 Mar 2019

You're 100% sure the Gemfile.lock didn't change except for the BUNDLED WITH at the bottom?

connorshea on 5 Mar 2019

These are the only changes:
screen shot 2019-03-05 at 2 14 26 pm

mariogmz on 5 Mar 2019

import '../application/stylesheets/index.js.erb';

Do you the appropriate loaders to transform erb files like this? I don't think this would work without a lot of very specific steps.

jakeNiemiec on 5 Mar 2019

@jakeNiemiec I removed the .erb extension, still not working, it was working before the upgrade tho

mariogmz on 5 Mar 2019

👀1

Webpacker 4.0.1 was released less than a day ago, what was the last version that it worked with? Did your yarn.lock file change?

jakeNiemiec on 5 Mar 2019

@mariogmz Let's address some easy questions first (in order):

styles are not loading anymore in our app.

Did you need to follow the v4 upgrade guide? (if relevant)
Does your build complete without errors?
Can you see the resulting .css file in the manifest.json file?
Do you see an indication of the css file in the html? How are you loading the styles?

jakeNiemiec on 5 Mar 2019

👍1

@jakeNiemiec I just upgraded bundler version.

Do I need to upgrade to v4 ?
At this point, build compiles successfully.

14:52:51 webpack.1 | Hash: f41eb3cebaffb8f6fa42
14:52:51 webpack.1 | Version: webpack 3.12.0
14:52:51 webpack.1 | Time: 6626ms
14:52:51 webpack.1 |                                                Asset       Size  Chunks                    Chunk Names
14:52:51 webpack.1 |                  application-c18b73076f0da892240a.js     932 kB       0  [emitted]  [big]  application
14:52:51 webpack.1 |     application-0274654b10188be40011ea21c84107dd.css     238 kB       0  [emitted]         application
14:52:51 webpack.1 |              application-c18b73076f0da892240a.js.map    1.12 MB       0  [emitted]         application
14:52:51 webpack.1 | application-0274654b10188be40011ea21c84107dd.css.map     421 kB       0  [emitted]         application
14:52:51 webpack.1 |                                        manifest.json  310 bytes          [emitted]
14:52:51 webpack.1 |    [2] ./node_modules/jquery/dist/jquery.js 272 kB {0} [built]
14:52:51 webpack.1 |    [4] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/application.js 40 bytes {0} [built]
14:52:51 webpack.1 |    [5] (webpack)-dev-server/client?http://localhost:3035 7.93 kB {0} [built]
14:52:51 webpack.1 |    [6] ./node_modules/url/url.js 23.3 kB {0} [built]
14:52:51 webpack.1 |    [7] ./node_modules/punycode/punycode.js 14.7 kB {0} [built]
14:52:51 webpack.1 |   [13] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
14:52:51 webpack.1 |   [15] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
14:52:51 webpack.1 |   [16] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
14:52:51 webpack.1 |   [17] ./node_modules/sockjs-client/dist/sockjs.js 181 kB {0} [built]
14:52:51 webpack.1 |   [18] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
14:52:51 webpack.1 |   [23] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
14:52:51 webpack.1 |   [25] (webpack)/hot/emitter.js 77 bytes {0} [built]
14:52:51 webpack.1 |   [27] ./app/javascript/packs/application.js 572 bytes {0} [built]
14:52:51 webpack.1 |   [28] ./app/javascript/application/stylesheets/index.js.erb 28 bytes {0} [built]
14:52:51 webpack.1 |   [30] ./app/javascript/application/javascripts/index.js.erb 330 bytes {0} [built]
14:52:51 webpack.1 |     + 25 hidden modules
14:52:51 webpack.1 | 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/application/stylesheets/application.scss:
14:52:51 webpack.1 |        [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/application/stylesheets/application.scss 767 kB {0} [built]
14:52:51 webpack.1 |        [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
14:52:51 webpack.1 | webpack: Compiled successfully.

This is the manifest file:

{
  "application.css": "/packs/application-0274654b10188be40011ea21c84107dd.css",
  "application.css.map": "/packs/application-0274654b10188be40011ea21c84107dd.css.map",
  "application.js": "/packs/application-c18b73076f0da892240a.js",
  "application.js.map": "/packs/application-c18b73076f0da892240a.js.map"
}

Inside the layout we have = stylesheet_pack_tag "application", media: "all", "data-turbolinks-track": "reload", then inside the app/javascript/packs/application.js file:
import '../application/stylesheets/index.js.erb';

And then, in application/stylesheets/index.js.erb

import './application.scss';

Inside application.scss:

@import "normalize.css";
@import "variables_override";
@import "~bootstrap/scss/bootstrap";

@import "components/index";
@import "modules/index";

@jakeNiemiec thanks for the support, I don't know if also I'm having a bad configuration or I'm importing CSS correctly or not, also, it's important to mention that the app was created using Rails 5.2.2, and then upgraded to Rails 6.

mariogmz on 5 Mar 2019

@jakeNiemiec if I enable hmr: true inside config/webpacker.yml it works, somehow, but it always been set to false

mariogmz on 5 Mar 2019

Why do the logs say webpack 3.12? Webpacker 4 is supposed to use webpack 4.x (or, I think it is?)

connorshea on 5 Mar 2019

👀1

Do I need to upgrade to v4 ?

Yes, nice catch @connorshea. @mariogmz see the end of this post.

Inside the layout we have = stylesheet_pack_tag "application", media: "all", "data-turbolinks-track": "reload", then inside the app/javascript/packs/application.js file:

I meant the resulting html that the browser sees.

it's important to mention that the app was created using Rails 5.2.2, and then upgraded to Rails 6.

Then you definitely need to follow the upgrade guide.

@jakeNiemiec if I enable hmr: true inside config/webpacker.yml it works, somehow, but it always been set to false

This is because the style-loader is injected, the .js is injecting your css into <head>. This will not work in production.

@mariogmz In short, start with:

bundle update webpacker
rails webpacker:binstubs
yarn upgrade @rails/webpacker --latest
yarn add webpack-dev-server@^3.1.14

Then follow the steps in: https://github.com/rails/webpacker/blob/master/docs/v4-upgrade.md#webpacker-upgrade-guide

That should fix you up nicely.

jakeNiemiec on 5 Mar 2019

🎉5 ❤4

@JakeLaCombe Worked like a charm! Thank you so much.

mariogmz on 5 Mar 2019

🎉1

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Rails `assets:precompile` does not compile the assets to `public/packs`

vtno · 3Comments

Stimulus rake task is not in the v3.2.1 release

christianrojas · 3Comments

How to import bootstrap

pioz · 3Comments

Disable optimization / uglify

itay-grudev · 3Comments

Pack assets ignores Rails assets prefix

johan-smits · 3Comments