How to use SASS/SCSS in phoenix-framework.

Goal

• PhoenixでSASS/SCSSを使う

Dev-Environment

• OS: Windows8.1
• Erlang: Eshell V7.3, OTP-Version 18.3
• Elixir: v1.2.3
  • Phoenix: v1.1.4

How to use SASS/SCSS in phoenix-framework.

PhoenixでSASS/SCSSを使ってみたいと思います。

何故いきなり、SASSやSCSSを使おうと考えたのかといいますと、
Bootstrap4からSASSが使えるようになったからですね。

そこで、せっかくなのでPhoenixでも使えないかと思い調べたのですが、
かなり簡単にできることが分かりましたので使ってみようと思います。

全体の流れとしては以下のようになります。

1. 検証用プロジェクトを作成する。
2. npmのパッケージを追加する。(Package: sass-brunch)
3. app.cssファイルを.sassまたは.scssにリネームする。
4. 実行し、デザインに反映されているか確認する。
5. .sass/.scssファイルがコンパイルされ、.cssファイルが生成されていることを確認する。

パッケージを追加する際のやり方ですが、二通りあります。
一つは、—no-brunchオプションを使い、package.jsonに追記を行った後に”npm install”する。
もう一つは、通常のとおりプロジェクトを作成し、個別でsass-brunchパッケージを追加する方法です。

大した違いではないですが、お好きな方を使えばいいと思います。
今回は、後者の方法を使って検証していきます。

Create Project

検証用のプロジェクトを作成します。

> cd path/to/create/directory
> mix phoenix.new sass_support
...

> cd sass_support

Add npm package

パッケージを追加する前にpackage.jsonを確認してみます。

File: package.json

{
  "repository": {
  },
  "dependencies": {
    "babel-brunch": "~6.0.0",
    "brunch": "~2.1.3",
    "clean-css-brunch": "~1.8.0",
    "css-brunch": "~1.7.0",
    "javascript-brunch": "~1.8.0",
    "uglify-js-brunch": "~1.7.0",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html"
  }
}

上記のパッケージへsass-brunchが追加されれば良いわけですね。

“dependencies”に追記もして欲しいので、—saveオプションを使います。
また、今回はローカルのプロジェクトのみで利用できればよいので、-gオプションは使いません。

Example:

> npm install sass-brunch --save
...長いので割愛

package.jsonにも追加されているか確認してみましょう。

File: package.json

{
  "repository": {},
  "dependencies": {
    ...
    "sass-brunch": "^2.6.2",
    ...
  }
}

問題なく追加されていますね。
ちゃんとインストールされたか気になるようであれば、
パッケージの一覧を見てみるのもいいと思います。
(コマンド実行時にパッケージの一覧も表示されています)

Rename app.css -> app.sass or app.scss

Phoenixのプロジェクト作成時、デフォルトで生成されているapp.cssをリネームします。
自前で.sass/.scssファイルを用意してもいいのですが、ちょっと面倒くさいので…

Before: priv/static/css/app.css

After: priv/static/css/app.scss

Let’s “mix phoenix.server”.

さてさて、ようやっと実行まできました。
何も考えないで実行してみましょう。

Example:

> mix phoenix.server
...

ブラウザから確認してみましょう…問題なしですね！

また、priv/static/css配下にapp.cssが生成されています。
こちらも合わせ確認してみてください。

今回は以上になります。
誰かの参考になったら、この上ない喜びです＞＜

Bibliography

StackOverflow - How to use SASS/SCSS with Phoenix framework?
Phoenix Framework - Static Assets

​