Rails 7 with Import Maps and CSS Bundling: Assets Not Served from /builds Directory
I’m working on a Rails 7 application where I’m using Import Maps for JavaScript and CSS Bundling via Yarn instead of Sprockets. Despite following the setup instructions, my assets aren’t being served correctly from the /builds directory.
Issue:
When loading my homepage, the CSS file is not found, and I get the following error in the browser console:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
Request URL: http://localhost:3000/stylesheets/application.css
The rendered HTML for the home page includes:
<link rel="stylesheet" href="/stylesheets/application.css" media="all" data-turbo-track="reload">
However, my CSS file is located at /app/assets/builds/application.css.
Setup:
- Rails Version: 7.1.3.4
- Ruby Version: 3.2.2
- CSS Bundling: Using Yarn scripts for compiling SCSS files
- JavaScript: Using Import Maps
Directory Structure:
app/assets
├── builds
│ └── application.css
├── config
│ └── manifest.js
├── stylesheets
│ ├── application.bootstrap.scss
│ ├── application.scss
Config Files:
config/environments/development.rb:
Rails.application.configure do
config.cache_classes = false
config.eager_load = false
config.consider_all_requests_local = true
config.server_timing = true
config.hosts << "improvement.rocks"
if Rails.root.join("tmp/caching-dev.txt").exist?
config.action_controller.perform_caching = true
config.action_controller.enable_fragment_cache_logging = true
config.cache_store = :memory_store
config.public_file_server.headers = {
"Cache-Control" => "public, max-age=#{2.days.to_i}"
}
else
config.action_controller.perform_caching = false
config.cache_store = :null_store
end
config.active_storage.service = :local
config.action_mailer.raise_delivery_errors = false
config.action_mailer.perform_caching = false
config.active_support.deprecation = :log
config.active_support.disallowed_deprecation = :raise
config.active_support.disallowed_deprecation_warnings = []
config.active_record.migration_error = :page_load
config.active_record.verbose_query_logs = true
config.public_file_server.enabled = true
config.public_file_server.headers = {
'Cache-Control' => "public, max-age=#{1.hour.to_i}"
}
end
app/assets/config/manifest.js:
//= link_tree ../images
//= link_tree ../builds
app/views/layouts/application.html.erb:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Improvement.Rocks</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>
<%= javascript_importmap_tags %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<a class="navbar-brand" href="#page-top">The Improvement Project</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<%= render 'layouts/navigation_links' %>
</ul>
</div>
</div>
</nav>
<main role="main">
<%= yield %>
</main>
</body>
</html>
Steps Taken:
-
Ensured that
application.cssis generated in the/buildsdirectory using the following Yarn script:"scripts": { "build:css": "yarn build:css:compile && yarn build:css:prefix", "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules", "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css", "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec "yarn build:css"", "build:js": "esbuild app/javascript/application.js --bundle --outfile=app/assets/builds/application.js" } -
Added public file server configuration in
development.rb.
Help Please!
I need help understanding why the assets are not being served from the /builds directory and why the generated HTML still references /stylesheets/application.css instead of /builds/application.css.