Skip to content

Commit

Permalink
Explain css/js asset digest file references
Browse files Browse the repository at this point in the history
  • Loading branch information
dhh authored Sep 30, 2024
1 parent e28a762 commit 364e993
Showing 1 changed file with 23 additions and 0 deletions.
23 changes: 23 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,29 @@ You can however exempt directories that have been added through the `config.asse

These assets can be referenced through their logical path using the normal helpers like `asset_path`, `image_tag`, `javascript_include_tag`, and all the other asset helper tags. These logical references are automatically converted into digest-aware paths in production when `assets:precompile` has been run (through a JSON mapping file found in `public/assets/.manifest.json`).

## Referencing digested assets in CSS and JavaScript

Propshaft will automatically convert asset references in CSS to use the digested file names. So `background: url("/bg/pattern.svg")` is converted to `background: url("/assets/bg/pattern-2169cbef.svg")` before the stylesheet is served.

For JavaScript, you'll have to manually trigger this transformation by using the `RAILS_ASSET_URL` pseudo-method. It's used like this:

```javascript
export default class extends Controller {
init() {
this.img = RAILS_ASSET_URL("/icons/trash.svg")
}
}
```

That'll turn into:

```javascript
export default class extends Controller {
init() {
this.img = "/assets/icons/trash-54g9cbef.svg"
}
}
```

## Bypassing the digest step

Expand Down

0 comments on commit 364e993

Please sign in to comment.