webpacker: Styles not loaded after upgrade to Rails 6 / Bundler 2
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!
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 15 (8 by maintainers)
Yes, nice catch @connorshea. @mariogmz see the end of this post.
I meant the resulting html that the browser sees.
Then you definitely need to follow the upgrade guide.
This is because the
style-loader
is injected, the .js is injecting your css into<head>
. This will not work inproduction
.@mariogmz In short, start with:
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 I removed the
.erb
extension, still not working, it was working before the upgrade tho@JakeLaCombe Worked like a charm! Thank you so much.
Why do the logs say webpack 3.12? Webpacker 4 is supposed to use webpack 4.x (or, I think it is?)
@mariogmz Let’s address some easy questions first (in order):