LoginSignup
26

More than 5 years have passed since last update.

laravelでscssを使ってみる

Last updated at Posted at 2015-09-07

手順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が生成されていると思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26