Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@minsu

webpacker でページごとにスタイルを分ける

More than 1 year has passed since last update.

こんにちは、 streampack の minsu です。
東京オリンピックが決まった時はまだまだ先だと思っていた2020年が来ましたね!あまり実感がないですが!

はじめに

ページごとに読み込まれるcssとjsを変更したいことがあるかと思います。
RailsでWebpacker利用時にページごとにcss,jsのスタイルを分ける方法をまとめました。

作業内容は次の通りです。
・エントリポイントを複数作成する
・ページごとに対応するエントリポイントを呼び出す

また、こちらの過去の記事の環境を使っています。
Docker + Rails + React

ファイル構成

Webpackerディレクトリ構成

Webpackerのconfigを見てみると
app/javascript にjs,cssを
app/javascript/packsにエントリポイントを配置し
ビルド後のファイルはpublic/packsに格納されるようになっています。

config/webpacker.yml
default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
...

さて現在のapp/javascriptディレクトリのファイル構成です。

app/javascript                                                                                                                                     
├── components           
│   └── users
│       ├── Edit.js
│       ├── Index.js
│       ...                                                                                  
├── packs
│   └── application.js 
└── src
    ├── js
    │   └── application.js 
    └── css
        └── application.css 

configの通りpacks/application.jsがエントリポイントとなります。
srcにはcss, jsファイルを、
componentsにはreact-railsgemを使っている関係でReactファイルを配置しています。

エントリポイント

application.js
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

import "src/js/application.js";
import "src/css/application.css";

エントリポイントである packs/application.jsを見てみます。
上3行のcomponentsディレクトリのReactファイルをRails view側から呼び出すためのreact-railsの記述と
下2行のsrcのjs,cssファイルimportの記述があります。

ビルド後はこの情報を元にjs,cssがひとまとめのファイルとなります。
そのため、Rails側の下記コードでエントリポイントを指定する事で

application.html.erb
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>

viewからReactファイルの利用と、
src/js/application.js,src/css/application.cssの読み込みを行えます。

viewからReactを利用するのに必要ですのでエントリポイント application は全てのページから共通で呼び出すようにします。

エントリポイント作成

本題ですがページごとに読み込まれるcssとjsを変更したい場合を考えます。
この場合、packs/application.jsのエントリポイントにimportを追加すると全てのページに反映されてしまい都合がよくありませんので、新たにエントリポイントをして必要なページから呼び出すようにします。

packs/users/index.js
import "src/js/index.js";
import "src/css/index.css";
index.html.erb
<%= javascript_pack_tag 'users/index' %>
<%= stylesheet_pack_tag 'users/index' %>

上記のようなエントリポイントを作成して必要なviewなどから呼び出す事で、
必要なページでのみスタイルを反映させることができます。

ファイル構成

app/javascript                                                                                                                                     
├── components           
│   └── users
│       ├── Edit.js
│       ├── Index.js
│       ...                                                                                    
├── packs
│   ├── application.js 
│   └── users
│       └── index.js
└── src
    ├── js
    │   ├── application.js 
    │   └── users
    │       └── index.js 
    └── css
        ├── application.css 
        └── users
            └── index.css

参考

https://github.com/rails/webpacker
https://github.com/reactjs/react-rails

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
minsu
cloudpack
Amazon Web Services (AWS) の導入設計、環境構築、運用・保守をサポートするマネジドホスティングサービス

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?