https://github.com/sebouchu/propshaft-sample-app
Sample Rails 7 application with Propshaft
https://github.com/sebouchu/propshaft-sample-app
Last synced: over 1 year ago
JSON representation
Sample Rails 7 application with Propshaft
- Host: GitHub
- URL: https://github.com/sebouchu/propshaft-sample-app
- Owner: SebouChu
- Created: 2021-12-09T22:30:17.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-10T08:44:53.000Z (over 4 years ago)
- Last Synced: 2025-02-03T08:01:49.135Z (over 1 year ago)
- Language: Ruby
- Size: 41 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Propshaft Sample App
A Rails 7 application to try a few things with Propshaft. This README will contain some issues I encountered.
## Specs
- Rails 7.0.0.rc1
- Ruby 3.0.3
- Propshaft
- JSBundling-Rails (with esbuild)
- CSSBundling-Rails (with sass)
- Bootstrap 5
- Bootstrap Icons
- Font Awesome 5 Icons
## Issues
### Bootstrap Icons - Font files
Bootstrap 5 Icons did not work out-of-the-box. Fonts were not imported correctly.
In the original `bootstrap-icons.scss`, they are imported via the `$bootstrap-icons-font-src` variable.
Default value:
```scss
$bootstrap-icons-font-src: url("./fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d") format("woff2"),
url("./fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d") format("woff") !default;
```
To make the icons work, I had to do two things:
- Create an initializer to add the fonts from `node_modules` in Propshaft's load path.
In `config/initializers/assets.rb`:
```ruby
Rails.application.config.assets.paths << Rails.root.join("node_modules", "bootstrap-icons", "font")
```
- Change the `$bootstrap-icons-font-src` variable before importing `bootstrap-icons` stylesheet. We need to remove the fingerprint.
In `app/assets/stylesheets/application.sass.scss`:
```scss
$bootstrap-icons-font-src: url("./fonts/bootstrap-icons.woff2") format("woff2"),
url("./fonts/bootstrap-icons.woff") format("woff");
@import "bootstrap-icons/font/bootstrap-icons";
```
### Font Awesome - Font files
Font Awesome Icons did not work out-of-the-box. Fonts were not imported correctly.
It uses an SCSS variable `$fa-font-path` to determine where to look for font files. (default: `"../webfonts"`)
To make the icons work, I had to:
- Add Font Awesome folder from `node_modules` in Propshaft's load path.
In `config/initializers/assets.rb`:
```ruby
Rails.application.config.assets.paths << Rails.root.join("node_modules", "@fortawesome", "fontawesome-free")
```
- Change the `$fa-font-path` variable before importing `@fortawesome/fontawesome` stylesheets.
In `app/assets/stylesheets/application.sass.scss`:
```scss
// Before: $fa-font-path: "../webfonts";
$fa-font-path: "./webfonts";
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/solid";
```