webpacker setup for bulma and fontawesome

1. yarn add on bash

yarn add @fortawesome/fontawesome-free 
yarn add @fortawesome/free-brands-svg-icons 
yarn add @fortawesome/free-solid-svg-icons 
yarn add bulma

2. Added bulma, fa link in application.scss

# app/javascript/stylesheets/application.scss
@import '~bulma';
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid'; // fas prefix
@import '~@fortawesome/fontawesome-free/scss/brands'; // fab prefix
# https://gist.github.com/ro31337/fde256c19074356e4f847a48f696658c

3. Delete stylesheet_link_tag in application.html.erb

<% stylesheet_link_tag... to

4. Add link application.scss in application.js

# app/javascript/packs/application.js
import '../stylesheets/application.scss'
# import '../stylesheets/your scss or sass or css'
# https://github.com/rails/webpacker/blob/master/docs/css.md

4. Compile on bash

# bundle exec npm rebuild node-sass # https://www.changwoo.org/x1wins@changwoo.net/2020-11-28/Error-Missing-binding-linux-x64-72-binding-node-52558689e9
# bundle exec rails webpacker:compile

# docker-compose 
docker-compose run --no-deps web bundle exec npm rebuild node-sass && docker-compose run --no-deps web bundle exec rails webpacker:compile

#webpacker (1) #scss (1) #sass (1) #css (1) #rails (38)

List