手順1. composerでscssをインストールしておく
composer.json
"require"{
"panique/laravel-sass": "dev-master"
}
手順2. composer updateの実行
composer update
手順3. index.phpでscssをcssにするコード追記
public/index.php
SassCompiler::run("scss/", "css/");
手順4. scssとcssディレクトリを作る
$ mkdir public/css
$ mkdir public/scss
手順5. scssファイルの作成と読み込み
public/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, a:visited {
text-decoration:none;
}
h1 {
font-size: 32px;
margin: 16px 0 0 0;
}
welcome.blade.phpでstyle.cssを読み込む形に変える
welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel</title>
<link href="/css/style.css" rel="stylesheet" type="text/css">
</head>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">Laravel 5</div>
</div>
</div>
</body>
</html>
これで、実際にwebページにアクセスしてみます。
scss/style.scss
が自動的にコンパイルされ、css/style.css
が生成されていると思います。