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というファイルがあるので、これに以下を追記します。

    "require-dev": {
        "panique/laravel-sass": "dev-master"
    }


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

    {
    "name": "laravel/laravel",
             "description": "The Laravel Framework.",
             "keywords": ["framework", "laravel"],
             "license": "MIT",
             "require": {
                     "laravel/framework": "4.2.*"
             },
    
             "require-dev": {
                         "panique/laravel-sass": "dev-master"
             },
    
             "autoload": {


    index.phpに追記

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

    SassCompiler::run("scss/", "css/");


    css, scssフォルダの用意

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

    $ sudo mkdir public/css
    $ sudo mkdir public/scss
    $ sudo chmod -R 777 public/css
    $ sudo chmod -R 777 public/scss


    composerでインストール

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

    $ sudo composer update


    使い方

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

    <!doctype html>
       <html lang="en">
       <head>
               <meta charset="UTF-8">
               <title>Laravel PHP Framework</title>
               <style>
                       @import url(//fonts.googleapis.com/css?family=Lato:700);
      
                       body {
                              margin:0;
                              font-family:'Lato', sans-serif;
                              text-align:center;
                              color: #999;
                      }
     
                      .welcome {
                              width: 300px;
                              height: 200px;
                              position: absolute;
                              left: 50%;
                              top: 50%;
                              margin-left: -150px;
                              margin-top: -100px;
                      }
     
                      a, a:visited {
                              text-decoration:none;
                      }
     
                      h1 {
                              font-size: 32px;
                              margin: 16px 0 0 0;
                      }
              </style>
      </head>
      <body>
              <div class="welcome">
    
              ------ 下記省略 ------



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

      body {
             margin:0;
             font-family:'Lato', sans-serif;
             text-align:center;
             color: #999;
      }
      .welcome {
             width: 300px;
             height: 200px;
             position: absolute;
             left: 50%;
             top: 50%;
             margin-left: -150px;
             margin-top: -100px;
      }
     
      a{
           :visited {
                 text-decoration:none;
            }
       }
       
       h1 {                         
             font-size: 32px;
             margin: 16px 0 0 0;
       }



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

    <!doctype html>
       <html lang="en">
       <head>
               <meta charset="UTF-8">
               <title>Laravel PHP Framework</title>
    
               {{ HTML::style('css/style.css') }}
      </head>
      <body>
              <div class="welcome">
    
              ------ 下記省略 ------



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

    body {
             margin:0;
             font-family:'Lato', sans-serif;
             text-align:center;
             color: #999;
      }
      .welcome {
             width: 300px;
             height: 200px;
             position: absolute;
             left: 50%;
             top: 50%;
             margin-left: -150px;
             margin-top: -100px;
      }
     
       a, a:visited {
             text-decoration:none;
       }
       
       h1 {                         
             font-size: 32px;
             margin: 16px 0 0 0;
       }

    まとめ

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

    SPONSORED LINK

    この投稿へのコメント

    コメントはありません。

    コメントを残す

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

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

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

    トラックバック URL