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

公開日：2014/10/26 更新日：2014/10/26

css laravel php scss

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フォルダにcss、scssという名前フォルダを作成しておきます。このとき権限は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">

          ------ 下記省略 ------

上記ので囲まれた部分を、下記のように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.phpはhello.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;
   }