1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

PhoenixアプリでBootstrap 4 & PurgeCSS

今日は、Phoenix (v1.5)アプリでBootstrap 4PurgeCSSの設定方法についてまとめます。

最近(2021年前半)TailwindがCSSフレームワークとして流行っているようです。しかしながら、ちょこっと触ってみた結果の印象ですが、個人的にその仕様で特に便利と思われる部分は見当たりませんでした。むしろ複雑性が増し、生産性が低下するような気がします。¯_(ツ)_/¯

長年の実績のあるSASSとBootstrapフレームワークに何も問題がないので、どうしてもTailwindでないとできない素晴らしい機能がでてくるまで、SASSとBootstrapを使わない理由が個人的にはありません。Bootstrapには各種コンポーネントが準備されていて、それを変数で自由にカスタマイズできます。イチからコンポーネントを組み立てる必要はありません。ややこしいルールも設定もありません。基本的にCSSですから。PurgeCSSも使えるので不要なCSSはコンパイル時に取り除くことができます。

それでもTailwindを使用したい方は、Pragmatic Studioのこの記事にわかりやすく設定方法を説明されています。

2021/04/10(土) 00:00〜開催のautoracex #22での成果です。
English edition

1. Bootstrapをインストール

cd path/to/my/phoenix/app
npm install --prefix assets --save-dev bootstrap@4 purgecss-webpack-plugin glob-all

2. Bootstrapのscssファイルをimport

次にBootstrapのscssファイルをPhoenixアプリのassets/css/app.scssにimportします。

assets/css/app.scss
  /* This file is for your main application css. */
  @import "../node_modules/nprogress/nprogress.css";
+ @import "../node_modules/bootstrap/scss/bootstrap.scss";

3. PurgeCSSの設定

厳密に言えば、これはあってもなくても良いのですが、おそらく大部分のBootstrapのCSSは未使用になると思われますので、CSSファイルを小さくするためにPurgeCSSを使うことは得策であると考えています。設定は比較的簡単で、Phoenixアプリのassets/webpack.config.jsを開き3箇所変更するのみです。

  • PurgeCSSが正しくCSS関連ファイルを発見するために複数のパターンを適用したいので、glob の代わりにglob-all を使用します。
  • purgecss-webpack-pluginを使用します。
  • PhoenixアプリでPurgeCSSに読み込ませたいファイルは下記のとおりです。
    • viewモジュール
    • テンプレート
    • JavaScript
assets/webpack.config.js
  const path = require('path');
- const glob = require('glob');
+ const glob = require('glob-all');
  const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const TerserPlugin = require('terser-webpack-plugin');
  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
+ const PurgecssPlugin = require('purgecss-webpack-plugin');

  module.exports = (env, options) => {
    const devMode = options.mode !== 'production';

    return {

      ...

      plugins: [
        new MiniCssExtractPlugin({ filename: '../css/app.css' }),
        new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
+       new PurgecssPlugin({
+         paths: glob.sync([
+           '../lib/**/*.ex',
+           '../lib/**/*.leex',
+           '../lib/**/*.eex',
+           './js/**/*.js',
+           // ライブラリをインストールしたあとに忘れがち
+           './node_modules/some_library/**/*.js',
+         ]),
+       }),
      ]
      .concat(devMode ? [new HardSourceWebpackPlugin()] : [])
    }
  };

プロダクションのみにPurgeCSSをしようするのであれば、下記の通り分岐できます。

assets/webpack.config.js
module.exports = (env, options) => {
  const devMode = options.mode !== 'production';

  return {

    ...

    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
      new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    ].concat(
      devMode
        ? [
            // development only
            new HardSourceWebpackPlugin(),
          ]
        : [
            // production only
            new PurgecssPlugin({
              paths: glob.sync([
                '../lib/**/*.ex',
                '../lib/**/*.leex',
                '../lib/**/*.eex',
                './js/**/*.js',
                // ライブラリをインストールしたあとに忘れがち
                './node_modules/some_library/**/*.js',
              ]),
            }),
          ]
    ),
  }
};

個人的にはdevelopmentとproductionとの両方に適用するのが好みです。NPMにライブラリをインストールしたときに、それをPurgeCSSに登録するのを忘れると、必要なCSSが取り除かれてしまいますが、本番でそれが起きるとパニックに陥るかもしれません。

4. 不要なPhoenixデフォルトのCSSを削除

BootstrapのCSSにはいくつかPhoenixデフォルトのCSSと全く同じCSSクラスが含まれているので、それらは削除することができます。ただし.alert:emptyは、フラッシュメッセージが空のときに隠す便利なCSSなので残してきます。

scss
- .alert {
-   padding: 15px;
-   margin-bottom: 20px;
-   border: 1px solid transparent;
-   border-radius: 4px;
- }
- .alert-info {
-   color: #31708f;
-   background-color: #d9edf7;
-   border-color: #bce8f1;
- }
- .alert-warning {
-   color: #8a6d3b;
-   background-color: #fcf8e3;
-   border-color: #faebcc;
- }
- .alert-danger {
-   color: #a94442;
-   background-color: #f2dede;
-   border-color: #ebccd1;
- }
- .alert p {
-   margin-bottom: 0;
- }
  .alert:empty {
    display: none;
  }

5. Bootstrapの変数をカスタマイズ

Bootstrapのスタイリングで満足であれば、このステップは不要です。僕は色や幅などをよく変更します。Bootstrapの変数はBootstrapのリポジトリで確認できます。

Phoenixアプリにassets/css/_variables.scssファイルを作り、そこにカスタマイズしたい変数の定義をコピペします。コピーした定義から!defaultを削除します。あとは値を好きなように変更します。下記は一例です。

assets/css/_variables.scss
$white:    #ffffff;
$gray-100: #eceff1;
$gray-200: #cfd8dc;
$gray-300: #b0bec5;
$gray-400: #90a4ae;
$gray-500: #78909c;
$gray-600: #607d8b;
$gray-700: #546e7a;
$gray-800: #455a64;
$gray-900: #37474f;
$black:    #263238;
$blue:     #2962FF;
$indigo:   #304FFE;
$purple:   #AA00FF;
$pink:     #C51162;
$red:      #D50000;
$orange:   #FF6D00;
$yellow:   #FFD600;
$green:    #00C853;
$teal:     #00BFA5;
$cyan:     #00B8D4;

そしてそのファイルをassets/css/app.scssにimportします。

assets/css/app.scss
  /* This file is for your main application css. */
+ @import 'variables';
  @import '../node_modules/nprogress/nprogress.css';
  @import '../node_modules/bootstrap/scss/bootstrap.scss';

6. カスタムscssファイルをimport

あとは自由に好きなようにスタイリングをします。カスタマイズしたBootstrapの変数にもアクセスできるはずです。

assets/css/app.scss
  /* This file is for your main application css. */
  @import 'variables';
  @import '../node_modules/nprogress/nprogress.css';
  @import '../node_modules/bootstrap/scss/bootstrap.scss';
+ @import 'my_custom_styles';

以上!

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
Sign upLogin
1
Help us understand the problem. What are the problem?