Rails6で標準搭載されたwebpackerでハマる

発端

「ん？こっちで見ましょうか？」

から、なかなか気づかずに恥ずかしいハマり方してたので備忘録。

npmやらyarnなどのお話はたくさん情報あるのでそちらで。

対象システムのwebpackerでのbuild対象

application.html.erb

<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

としてるので、js,css 共にbuild対象。

ファイル構成（必要部分のみ）

app/
└ javascript/
  └ packs/
  | └ application.js
  └ stylesheets/
    └ application.css
    └ custom.min.css

application.js

~~ 省略 ~~
import "../stylesheets/application";

application.css

@import "~bootstrap/scss/bootstrap";
@import "./custom.min";

ふむふむ。

$ bin/webpack
~~ 省略 ~~
ERROR in ./app/javascript/stylesheets/application.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find '~bootstrap/scss/bootstrap'
~~ 省略 ~~

この辺含めてファイル構成だったり確認したけれど特に問題なし、と。

改めてエラーを確認したところ。。。

ERROR in ./app/javascript/stylesheets/application.css

application.css!!

$ mv app/javascript/stylesheets/application.css app/javascript/stylesheets/application.scss

$ bin/webpack

無事build成功。
トホホ。。

結論

拡張子には気をつけよう。