Skip to content

Styles not loaded after upgrade to Rails 6 / Bundler 2 #1981

@mariogmz

Description

@mariogmz

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions