Phoenix Framework 上で Sass の環境を構築する方法

October 3, 2019

Category: Phoenix

Phoenix Framework はデフォルトで Sass を表記する仕様になっておりません。 Sass を使用できるようにするためには、多少手間がかかるため、その方法をご紹介したいと思います。なお、以下では SCSS 記法を使用しております。

開発環境

Ubuntu: 19.04
Hex: 0.20.1
Elixir: 1.9.1
OTP: 21.3
Phoenix: 1.4.9

※Phoenix 1.3 まではフロントエンドビルドツールとして Brunch が使用されてきましたが、Phoenix 1.4 以降では webpack が採用されています。そのため、Phoenix 1.4 以前のバージョンを使用される方は、以下の方法で scss を Phoenix で使用できるようにはなりませんので、ご注意ください。

Sass の環境構築

node-sass と sass-loader の導入

Phoenix 上にて Sass の環境を構築するために、 node-sass と sass-loader を導入します。 /assets/ ディレクトリ上で、以下のコマンドを実行してください。

npm install --save-dev node-sass sass-loader

上記のコマンドを実行することで /assets/package.json ファイルに node-sass と sass-loader が記入されていれば成功です。

app.scss の作成

/assets/css/ ディレクトリ上で app.css ファイル名称を以下のコマンドで app.scss に変更します。

mv app.css app.scss

webpack.config.js の編集

/assets/ ディレクトリ上の webpack.config.js ファイルを開き以下のように編集します(diff コマンドの結果で表示しています)。

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader']
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  },

app.js の編集

/assets/js/ ディレクトリ上の app.js ファイルを以下のように編集して、 scss ファイルを有効にします(diff コマンドの結果で表示しています)。

- import css from "../css/app.css"
+ import css from "../css/app.scss"

webpack と webpack-cli の最新バージョンをインストール

Phoenix 1.4 以降でフロントエンドビルドツールとして使用されている webpack と webpack-cli は Phoenix のインストール時にデフォルトでインストールされています。しかし、バージョンが古く、うまく他のプラグインと機能しないので、/assets/ ディレクトリ上にて以下のコマンドを実行し、最新バージョンへとアップデートします。

npm install --save-dev webpack webpack-cli

上記のコマンドを実行することで /assets/package.json ファイル webpack と webpack-cli のバージョンがアップデートされていれば成功です。

アップデート前 :

    "webpack": "4.4.0",
    "webpack-cli": "^2.0.10"

アップデート後 :

    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"

もし上手くアップデートできない場合、 npm install コマンド入力時に webpack@4.41.0 と webpack-cli@3.3.9 のように @ の後にインストールしたいバージョンを指定し、実行してみてください。

app.scss を編集

/assets/css/ ディレクトリ上で index.scss ファイルを作成し、 app.scss ファイルに以下を追加します。

@import "./index.scss";

最後に

以上の設定で、 Phoenix 上で Sass を使用できる環境を構築することができます。 Sass には大変便利な機能が備わっているので、 Phoenix Framework 上で使用できればレイアウトの作成を楽にすることができます。是非、この記事を参考にして Phoenix Framework に Sass を導入していただければと思います。

参考

Kindle 版の Elixir/Phoenix 初級②: データベースとクエリ構造体は、 Amazon Kindle Unlimited の対象です。