ランディネットワークの BLOG

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

Created at:
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-sasssass-loader を導入します。 '/assets/' ディレクトリ上で、以下のコマンドを実行してください。

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

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

app.scss の作成

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

mv app.css app.scss

webpack.config.js の編集

'/assets/' ディレクトリ上の 'webpack.config.js' ファイルを開き以下のように編集します。

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 ファイルを有効にします。

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

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

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

npm install --save-dev webpack webpack-cli

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

-   "webpack": "4.4.0",
-   "webpack-cli": "^2.0.10"
+   "webpack": "^4.41.0",
+   "webpack-cli": "^3.3.9"

もし上手くアップデートできない場合、コマンド入力時に webpack@4.41.0webpack-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 の対象です。