東京オリンピックが決まった時はまだまだ先だと思っていた2020年が来ましたね!あまり実感がないですが!はじめにページごとに読み込まれるcssとjsを変更したいことがあるかと思います。RailsでWebpacker利用時にページごとにcss,jsのスタイルを分ける方法をまとめました。作業内容は次の通りです。エントリポイントを複数作成するページごとに対応するエントリポイントを呼び出すまた、こちらの過去の記事の環境を使っています。Reacファイル構成Webpackerディレクトリ構成Webpackerのconfigを見てみるとapp/javascriptにjs,cssをapp/javascript/packsにエントリポイントを配置しビルド後のファイルはpublic/packsに格納されるようになっています。packs...さて現在のapp/javascriptディレクトリのファイル構成です。configの通りpacks/application.jsがエントリポイントとなります。jsファイルを、componentsにはreact-railsgemを使っている関係でReactファイルを配置しています。packs/application.jsを見てみます。view側から呼び出すためのreact-railsの記述と下2行のsrcのjs,cssファイルimportの記述があります。ビルド後はこの情報を元にjs,cssがひとまとめのファイルとなります。%>viewからReactファイルの利用と、src/js/application.js,src/css/application.cssの読み込みを行えます。applicationは全てのページから共通で呼び出すようにします。本題ですがページごとに読み込まれるcssとjsを変更したい場合を考えます。この場合、packs/application.jsのエントリポイントにimportを追加すると全てのページに反映されてしまい都合がよくありませんので、新たにエントリポイントをして必要なページから呼び出すようにします。必要なページでのみスタイルを反映させることができます。民洙2019年4月からstreampackチームにジョイン。ジョジョは7部が一番好きです。S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。cloudpack.。