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を入れる

/* 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

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タグが現れます。