More than 3 years have passed since last update.

Laravelでcssやjsが効かない時の解決方法

Last updated at 2020-05-05Posted at 2020-05-05

はじめに

laravelで初めて開発していた時にcssとjsを使おうとしたが効かなかったので解決方法を載せておきます

原因

publicフォルダにcssとjsフォルダがなかったため、blade.phpで使えなかった
resourcesフォルダーにcssとjsのフォルダはあるが移動させないと使えないので
Laravel初心者の方は注意が必要です！

解決方法

resourcesフォルダからpublicにフォルダを移動させるかpublicフォルダで新しく作ってください
そして、以下のようにasset関数を使ってください
これを使うとpublic限定で使うことができるので
どこのフォルダでcssやjsを使っているかわかりやすくなります

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="{{ asset('/css/sample.css') }}">
  <scriptsrc="{{ asset('/js/sample.js') }}"></script>
  <img alt="文字表示" src="{{ asset('/img/sample.png') }}">
  <title>Document</title>
</head>

# ディレクトリ構成
public---css--sample.css
          |
        　js--sample.js
　　　　　 |
          img--sample.png

最後に

cssやjsが効かない時は、必ずどこのフォルダに置いてあるか確認しましょう
あと、Laravalのフォルダ構成が気になる人は
こちらのLaravel 6 ディレクトリ・ファイル構造を見てください

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up