bootstrap.css をここだけ使いたい 〜 Laravel @scss ディレクティブの応用 〜

人のサイトをいじっていて、あーここだけbootstrap.css の form-control とか適用したいなぁってときがあります。

でも bootstrap.css を読み込んじゃったら、ページ全体に適用されちゃって困りますね。このdivの中でだけ適用したい、みたいな。

そこで、以前投稿した @scss ディレクティブを応用して、bootstrap.css を指定箇所（具体的には .my-bootstrap 内）でのみ適用する方法を紹介します。

準備

@scss ディレクティブ
を準備します。

設定

route/web.php

Route::get('{scssPath}', function ($scssPath) {

    $cacheDays = 7;
    $scssPath = strtr($scssPath, ['.scss'=>'']);

    $response = \Cache::remember($scssPath, 60 * 24 * $cacheDays,
        function () use ($scssPath) {
            return view($scssPath)->render();
        });

    return response($response)->header('Content-Type', 'text/css');

})->where('scssPath', '(.*).scss');

resources/views/scss/bootstrap.blade.php

@scss
.my-bootstrap {
{!! file_get_contents('/path/to/bootstrap.4.1.3.css') !!}
}
@endscss

hoge.html

<link rel="stylesheet" href="/scss/bootstrap.scss" type="text/css" media="all" />

<input type="text" class="form-control" name="hoge" value="適用されない" >

<div class="my-bootstrap">
  <input type="text" class="form-control" name="hoge" value="適用される" >
</div>

できましたー