Laravelで sassを使えるようにするための設定
![Laravelで sassを使えるようにするための設定のサムネイル](https://virment.com/images/2017/12/technology-1587673_1280.jpg)
PHPのWebアプリフレームワークであるLaravelについて最近勉強をはじめ、sassを使えるようにする設定を行ったので備忘録としてメモしておきます。使えるようにするまでの手順としては、下記のサイトを見ればOKでした。
How to use SASS in Laravel (with pure PHP) | DEV METAL
環境
手順
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;
}
まとめ
個人的には、scssで書けるほうがはるかに楽なのですごい便利になりました。ただ、まだあんまり使い込んだわけではないので、また何か気づいた点ができたら追記したいと思います。
開発アプリ
![](/app-icon.png)