How do I keep Rails in development mode from concatenating stylesheets and javascripts?

Question

I am using Rails 6.1 in development mode:

root@19ababcf7904:/app# bin/rails s -b 0.0.0.0 -p 3001
=> Booting Puma
=> Rails 6.1.7 application starting in development 
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.5 (ruby 3.1.2-p20) ("Birdie's Version")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 968
* Listening on http://0.0.0.0:3001
Use Ctrl-C to stop

From what I can tell, the asset pipeline is in debug mode:

config/environments/development.rb

...
  # Debug mode disables concatenation and preprocessing of assets.
  # This option may cause significant delays in view rendering with a large
  # number of complex assets.
  config.assets.debug = true
...

But when I look at my webpage, I am getting a single debug asset/stylesheet:

<link rel="stylesheet" media="all" href="/assets/application.debug-2bae18e528fb2c4b71218acd2f684fc542e57e7b3ab5eae5d2e1e7f6f50cf042.css" data-turbolinks-track="reload">

Here's the view bit:

    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

Whether Webpacker or Turbolinks are listed or not, I still get a concatenated application.css.

Gemfile

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

ruby '3.1.2'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.3', '>= 6.1.3.2'

gem 'pg'

# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false

gem 'slim-rails', '~> 3.2.0'
gem 'haml', '~> 6.0', '>= 6.0.3'

gem 'devise', '4.8.0'
gem 'recaptcha', '~> 5.12.0'

gem 'typhoeus', '~> 1.4.0'

gem 'simple_form', '~> 5.1.0'

gem 'sidekiq', '~> 6.5.7'

gem 'twitter-text', '~> 3.1.0'

gem 'grape', '~> 1.6.0'
gem 'grape_on_rails_routes', '~> 0.3.2'

gem 'net-smtp', '~> 0.3.1'
gem 'net-pop', '~> 0.1.1'
gem 'net-imap', '~> 0.2.3'

gem 'activeadmin', '~> 2.12.0'
#gem 'kaminari', '~> 1.2.2'
#kaminari-actionview
#kaminari-activerecord
#kaminari-core

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]

  gem 'rspec-rails', '~> 5.0.0'

  gem 'pry'
  gem 'pry-nav'
  gem 'pry-rails'

  gem 'factory_bot_rails', '~> 6.2.0'
  gem 'faker', '~> 2.18.0'
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 4.1.0'
  # Display performance information such as SQL time and flame graphs for each request in your browser.
  # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'solargraph'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'

  gem 'turnip'

  gem 'shoulda-matchers', '~> 4.0'
  gem 'shoulda-callback-matchers', '~> 1.1.4'
  gem 'webmock', '~> 3.14.0' 
end

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

I'm not really sure what to do here regarding making rails NOT combine my assets in development. At least, I don't want Rails to compile the stylesheets in development.

Answer 1

Discussion

sprockets

It's confusing because the messaging is different among the affected projects. It seems that Sprockets 4 concatenates everything by default now and uses Source Maps to aid in debugging:

https://github.com/rails/sprockets/blob/main/UPGRADING.md#source-maps

sprockets-rails

The sprockets-rails project updated its documentation in this commit removing the Individual files part and adding the source map part:

https://github.com/rails/sprockets-rails/commit/d267d6dea7b79518e231bd362947e265fa3da32f

- Enable expanded asset debugging mode. Individual files will be served to make referencing filenames in the web console easier. **This feature has been replaced by Source Maps and does nothing in Sprockets 4+.**
+ Enable asset debugging mode. A source map will be included with each asset when this is true.

Rails Guides

The Rails 6.1 Asset Pipeline guide says: https://guides.rubyonrails.org/v6.1/asset_pipeline.html#in-development

In development mode, assets are served as separate files in the order they are specified in the manifest file.

Whereas, the Rails 7 guide says: https://guides.rubyonrails.org/asset_pipeline.html#in-development

In development mode, assets are served as a concatenated file.

A relevant pull request: Update Asset Pipeline Guide to describe how Sprockets 4 works

Rails generator

The Rails 7 generator no longer has the config.assets.debug option listed by default: https://github.com/rails/rails/blob/main/railties/lib/rails/generators/rails/app/templates/config/environments/development.rb.tt

Solutions

Downgrade to Sprockets 3

Put this in your Gemfile, and everything should work like it used to with individual files appearing in the developer console:

gem 'sprockets', '~> 3'

NOTE: Read this to see what you'll be missing out on in Sprockets 4.x: https://github.com/rails/sprockets#upgrading-to-sprockets-4x

Don't concatenate files

I don't see an easy way to turn off concatenation in Sprockets 4. As an alternative, you could just individually require your assets; e.g., remove this line: app/assets/stylesheets/application.css

 *= require_tree .

Then, you would include your other CSS/SCSS files individually with the stylesheet_link_tag

Source Maps

Give up and use Source Maps. Unfortunately, I've found that using source maps with Sprockets 4 and the Chrome console has been buggy. Here's a relevant discussion if you go down this road:

sprockets 4 makes Chrome browser identification of SCSS css lines worse #656

A possible fix that hasn't been released yet:

Add source map on debug mode with Sprockets 4 #162

Disabling the Enable CSS source maps in the Chrome console might give the best debugging experience at the moment.