Skip to content

Commit 364e993

Browse files
authored
Explain css/js asset digest file references
1 parent e28a762 commit 364e993

File tree

1 file changed

+23
-0
lines changed

1 file changed

+23
-0
lines changed

README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,29 @@ You can however exempt directories that have been added through the `config.asse
2222

2323
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`).
2424

25+
## Referencing digested assets in CSS and JavaScript
26+
27+
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.
28+
29+
For JavaScript, you'll have to manually trigger this transformation by using the `RAILS_ASSET_URL` pseudo-method. It's used like this:
30+
31+
```javascript
32+
export default class extends Controller {
33+
init() {
34+
this.img = RAILS_ASSET_URL("/icons/trash.svg")
35+
}
36+
}
37+
```
38+
39+
That'll turn into:
40+
41+
```javascript
42+
export default class extends Controller {
43+
init() {
44+
this.img = "/assets/icons/trash-54g9cbef.svg"
45+
}
46+
}
47+
```
2548

2649
## Bypassing the digest step
2750

0 commit comments

Comments
 (0)