Laravelで sassを使えるようにするための設定
PHPのWebアプリフレームワークであるLaravelについて最近勉強をはじめ、sassを使えるようにする設定を行ったので備忘録としてメモしておきます。使えるようにするまでの手順としては、下記のサイトを見ればOKでした。
Contents
環境
手順
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/scsscomposerでインストール
あとは以下のコマンドでインストール完了です。
$ 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.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;
}まとめ
個人的には、scssで書けるほうがはるかに楽なのですごい便利になりました。ただ、まだあんまり使い込んだわけではないので、また何か気づいた点ができたら追記したいと思います。
SPONSORED LINK
この投稿へのトラックバック
トラックバックはありません。
- トラックバック URL
この投稿へのコメント