まず
rails new test
cd test
bundle install
yarn install --check-files
bin/rails s -b '0.0.0.0'
で Rails のデフォルト画面は表示されました
次に
https://railsguides.jp/webpacker.html
を参考にして
rails webpacker:install
app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
console.log('application.js');
と最後に console.log を追記して
rails g controller top index
で適当なコントローラを作ってから
ブラウザで /top/index を表示してみたところ console.log の内容も表示できました
それから
app/javascript/packs/application.scss
を作り、とりあえず中身はからにして
app/javascript/packs/application.js に
import "./application.scss";
を追加しました
ブラウザで /top/index 表示してみると
console.log('application.js');
が表示されなくなってしまいました
Rails のログは以下ですが特にエラーはなさそうに見えます
chrome の開発ツールのログにもエラーはありません
Started GET "/top/index" for 172.20.0.1 at 2021-09-03 01:45:29 +0000
Cannot render console from 172.20.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1
Processing by TopController#index as HTML
Rendering top/index.html.erb within layouts/application
Rendered top/index.html.erb within layouts/application (Duration: 0.2ms | Allocations: 4)
[Webpacker] Compiling...
[Webpacker] Compiled all packs in /home/test/public/packs
[Webpacker] Hash: 328ec5928f92fffafca1
Version: webpack 4.46.0
Time: 15058ms
Built at: 09/03/2021 1:45:50 AM
Asset Size Chunks Chunk Names
js/application-b4bed5c7f33d515b12c7.js 756 KiB application [emitted] [immutable] application
js/application-b4bed5c7f33d515b12c7.js.map 782 KiB application [emitted] [dev] application
manifest.json 364 bytes [emitted]
Entrypoint application = js/application-b4bed5c7f33d515b12c7.js js/application-b4bed5c7f33d515b12c7.js.map
[./app/javascript/packs/application.scss] 664 bytes {application} [built]
[./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/packs/application.scss] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/packs/application.scss 741 KiB {application} [built]
+ 2 hidden modules
Completed 200 OK in 21458ms (Views: 21456.5ms | ActiveRecord: 0.0ms | Allocations: 4841)
環境
rails 6.0.4.1
npm 6.14.14
yarn 1.22.11
よろしくお願いします
追記
SCSS ではなく app/javascript/packs/application.css にして
import "./application.css";
をかくと console.log は表示されました
ただ css の中で @import とかが使えないので bootstrap 等を使えなくなってしまいます
どうすればエントリーファイルに SCSS を使うことができるのでしょうか
さらに追記
packs ではなく別ディレクトリを作って
app/javascript/stylesheets/application.scss
において application.js に
import "../stylesheets/application.scss";
とかいたところ動くようになりました
Rails ガイドにはエントリファイルは packs におけっていってるんですが
同じファイルの .js と .scss を同じ場所におくのがダメということなんでしょうか
import の検索パスの詳細がわかるドキュメント等があれば教えていただきたいです