webpackでnode_modules配下のcssをimportするときのpathにチルダを入れる

npm installやyarn installで追加したcssを@importするとき、../../node_modules/normalize.css/normalize.cssのようにnode_modulesまでのディレクトリを辿っていくのは面倒。

~をパスの先頭につけると、node_modules配下のパスを解決してくれる。

@import "~normalize.css/normalize.css";

なので、このように~付きにすればnormalize.cssがimportできるようになる。

Rails 6にjQueryとBootstrapを入れる

エントリポイント（下記例の場合application.js）内で scss をimportすれば OK。

これでCSSがJS内で展開されるようになる。

/* app/javascript/stylesheets/application.scss */
@import '~bootstrap/scss/bootstrap';

// app/javascript/packs/application.js
import 'bootstrap';
import '../stylesheets/application';

stylesheet_pack_tag と Webpackerの設定 extract_css - Qiita

上述した設定を行った場合、CSSは単独でリンクされず、JSの中で動的にCSSを設定する、という構造になる。

単独でCSSをリンクしたいのであれば、webpacker の設定で extract_css の設定を追加する必要がある。

javascript_pack_tag と stylesheet_pack_tag の仕様はこうなってます：development環境では、JavaScriptを使って動的にCSSを埋め込む。CSSファイルを生成してlinkタグに指定することはしない。

development環境でもlinkタグを出すには、config/webpacker.yml で extract_css の値をtrueに変えます 。public/packsを削除してrailsを再起動してください。

  # Extract and emit a css file
  extract_css: true

するとlinkタグが現れます。