Zenn
Closed8

Weback + Bulma cssでRailsプロジェクトを始めてみる

Rails 7
KotaKota

目的

Weback + Bulma css構成でアセットパイプライン周りを理解する

KotaKota

構成：

  • バンドラー：Webpack
  • アセットパイプライン：Sprockets
  • CSSフレームワーク：Bulma CSS

Webpackはバンドラーで、Railsではバンドラーを使うときは jsbundling-rails を入れる必要がある。
また、Bulmaを使うために cssbundling-rails を入れる。WebpackにBulmaもバンドルさせる方法もあるが、より楽に設定したいので cssbundling-rails でいく。

KotaKota

このコマンドを叩く。

rails new webpack-cssbundling-bulma -j webpack -c bulma --skip-action-cable --skip-action-text --skip-action-mailer --skip-action-mailbox --sukip-jbuilder
  • -jオプション：バンドラーを選ぶ
  • -cオプション：CSSフレームワークを選ぶ
  • その他のスキップオプションで今回不要なものを外している
KotaKota

初期化されたRailsプロジェクト

package.json

{
  "name": "app",
  "private": true,
  "devDependencies": {
    "webpack": "^5.94.0",
    "webpack-cli": "^5.1.4"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "build:css": "sass ./app/assets/stylesheets/application.bulma.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  },
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^8.0.9",
    "bulma": "^1.0.2",
    "sass": "^1.78.0"
  }
}

sass は Bulma の依存として入っている。Hotwire関連はRailsプロジェクトにはデフォルトで入っているので今回は無視する。

sass を使って Bulma がビルドされている。

"build:css": "sass ./app/assets/stylesheets/application.bulma.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  },

./app/assets/stylesheets/application.bulma.scssにある Bulma ファイルを、/app/assets/builds/application.cssに出力する。

KotaKota

app/assets/stylesheets/application.bulma.scssを見てみる。

// @charset "utf-8";

// Import a Google Font
// @import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
// $purple: #8A4D76;
// $pink: #FA7C91;
// $brown: #757763;
// $beige-light: #D0D1CD;
// $beige-lighter: #EFF0EB;

// Update Bulma's global variables
// $family-sans-serif: "Nunito", sans-serif;
// $grey-dark: $brown;
// $grey-light: $beige-light;
// $primary: $purple;
// $link: $pink;
// $widescreen-enabled: false;
// $fullhd-enabled: false;

// Update some of Bulma's component variables
// $body-background-color: $beige-lighter;
// $control-border-width: 2px;
// $input-border-color: transparent;
// $input-shadow: none;

// Import only what you need from Bulma
// @import "bulma/sass/utilities/_all.sass";
// @import "bulma/sass/base/_all.sass";
// @import "bulma/sass/elements/button.sass";
// @import "bulma/sass/elements/container.sass";
// @import "bulma/sass/elements/title.sass";
// @import "bulma/sass/form/_all.sass";
// @import "bulma/sass/components/navbar.sass";
// @import "bulma/sass/layout/hero.sass";
// @import "bulma/sass/layout/section.sass";

@import 'bulma/bulma';

色に関する初期設定だったり、Bulma のいろんなコンポーネントをimportできるようになっている。

KotaKota

gemfile はこのようになっている。関係ある箇所のみを掲載する。

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
gem "jsbundling-rails"

# Bundle and process CSS [https://github.com/rails/cssbundling-rails]
gem "cssbundling-rails"

アセットパイプラインはRails従来のライブラリである Sprockets が入っている。これが/app/assets/builds/配下にあるアセットファイルを/publicに出力する。

KotaKota

webpack.config.jsを見てみる。

const path    = require("path")
const webpack = require("webpack")

module.exports = {
  mode: "production",
  devtool: "source-map",
  entry: {
    application: "./app/javascript/application.js"
  },
  output: {
    filename: "[name].js",
    sourceMapFilename: "[file].map",
    chunkFormat: "module",
    path: path.resolve(__dirname, "app/assets/builds"),
  },
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })
  ]
}

エントリーポイントを./app/javascript/application.jsと設定している。

  entry: {
    application: "./app/javascript/application.js"
  },

output（出力）に関する設定

  output: {
    filename: "[name].js",
    sourceMapFilename: "[file].map",
    chunkFormat: "module",
    path: path.resolve(__dirname, "app/assets/builds"),
  },

filename:
バンドルされたファイル名を設定している。ここでは、

  entry: {
    application: "./app/javascript/application.js"
  },

のキー名であるapplicationを取得している。つまり、バンドルして出力されるファイル名はapplication.jsとなる。

chunkFormat: "module"

chunkFormat: "module"は、チャンクをESモジュール形式で生成することを定義している。

path

バンドルしたファイルをどこに出力するか定義している。Railsではデフォルトでapp/assets/buildsに出力する。

    path: path.resolve(__dirname, "app/assets/builds"),

__dirnameは、Node.js で使われるグローバル変数で、現在実行中のスクリプトが存在するディレクトリの絶対パスを表す。

つまり、webpack.config.jsまでの絶対パスがこんな感じなら、

/Users/kanazawa/dev/rails/webpack-cssbundling-bulma/webpack.config.js

__dirnameは/Users/kanazawa/dev/rails/webpack-cssbundling-bulma/を表す

KotaKota

app/assets/config/manifest.js

//= link_tree ../images
//= link_tree ../builds

Sprocketsがアセットを管理するためのファイル。Railsのアセットパイプラインで使用されるSprocketsの設定ファイルと言ってもいい。
アセットパイプラインに含めるファイルやディレクトリを指定する。指定されたファイルはRailsアプリの公開ディレクトリである/public/assetsに配置される。

Bulmaはどこでビルドされているのかというと、

package.json

  ~
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "build:css": "sass ./app/assets/stylesheets/application.bulma.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  },
  ~

ここで sass を使ってビルドしている。そして/app/assets/builds/application.cssとあるとおり、ビルドされたCSSがこのファイルに書き出される。

そして//= link_tree ../buildsとあるとおり、ビルドされた Bulma CSS は/app/assets/builds/配下に配置されることによって、アセットパイプラインの流れに組み込まれる。

このスクラップは3ヶ月前にクローズされました