Laravelで sassを使えるようにするための設定

PHPのWebアプリフレームワークであるLaravelについて最近勉強をはじめ、sassを使えるようにする設定を行ったので備忘録としてメモしておきます。使えるようにするまでの手順としては、下記のサイトを見ればOKでした。

How to use SASS in Laravel (with pure PHP) | DEV METAL

環境

  • Ubuntu 14.04
  • Laravel Framework version 4.2.11
  • Composer version 1.0-dev

  • 手順

    composer.jsonに追記

    Laravelのフォルダ直下にcomposer.jsonというファイルがあるので、これに以下を追記します。


    私はcomposer.jsonの以下の位置に追記しました。


    index.phpに追記

    続いて、Laravelのフォルダ直下にあるpublicというフォルダ内のindex.phpに下記を追記します。index.phpの最終行あたりに$app->run().という行があるので、その前に下記を追記します。


    css, scssフォルダの用意

    次に、publicフォルダにcssscssという名前フォルダを作成しておきます。このとき権限は777にしておきます。(本番環境では適宜変えてください。)


    composerでインストール

    あとは以下のコマンドでインストール完了です。


    使い方

    使い方については説明が不要なほど簡単です。さきほど作成したscssフォルダにscssファイルを作成しておけば、あとは勝手にcssフォルダにcssファイルが作成されてLaravelが読み込んでくれます。
    例えば、Laravelのデモページであるhello.phpだと、下記のようになっていますが



    上記の<style>...</style>で囲まれた部分を、下記のようにscss形式で書いてscssフォルダにstyle.scssという名前で保存します。



    また、hello.phphello.blade.phpに名前を変えて下記のように修正しておきます。



    これであとは通常通りLaravelのデモページにアクセスすれば、今まで同じ画面が表示されます。また、cssフォルダには下記の内容のstyle.cssが作成されます。

    まとめ

    個人的には、scssで書けるほうがはるかに楽なのですごい便利になりました。ただ、まだあんまり使い込んだわけではないので、また何か気づいた点ができたら追記したいと思います。

    このエントリーをはてなブックマークに追加

    SPONSORED LINK

    この投稿へのコメント

    コメントはありません。

    コメントを残す

    メールアドレスが公開されることはありません。

    この投稿へのトラックバック

    トラックバックはありません。

    トラックバック URL