Laravel にスタイルを導入する方法を調べる-Laravel-php.cn

Laravel にスタイルを導入する方法を調べる

PHPz

リリース： 2023-04-21 10:24:09

オリジナル

950 人が閲覧しました

Laravel は現在最も人気のある PHP フレームワークの 1 つであり、開発者に最新の Web アプリケーションを迅速に開発する方法を提供します。従来の PHP の記述方法と比較して、Laravel の機能の多くは自動化されているため、強力なアプリケーションをより速く作成できます。この記事では、Laravel にスタイルを導入する方法を説明します。

CSS ファイルの使用

Laravel では、従来の CSS ファイルをスタイルシートとして使用できます。 public ディレクトリの下に css ディレクトリを作成し、その中に CSS ファイルを配置します。たとえば、ファイルの名前が style.css の場合、ディレクトリ構造は次のようになります。

public/
└── css/
    └── style.css

ログイン後にコピー

このスタイルシートをビューに適用するには、ビューのラベルで HTML リンクを使用する必要があります。このタグは、ビューの head (<head>) タグ内にあります。ビューが resource/views/index.blade.php にあると仮定すると、コードは次のようになります:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Laravel App</title>
    <link rel="stylesheet" href="{{ asset(&#39;css/style.css&#39;) }}">
</head>
<body>
    <!-- your html code here -->
</body>
</html>

ログイン後にコピー

リンクタグでは、Laravel のアセットヘルパー関数を使用して CSS ファイルパスを指定していることに注意してください。。このメソッドはアプリケーション URL への完全なパスを返し、Web ページにロードできるようにします。

CDN の使用

Laravel アプリケーションでローカルファイルを使用することに加えて、CDN (コンテンツ配信ネットワーク) を使用してスタイルシートを導入することもできます。 CDN は、地理的に複数の場所にあるサーバーを使用して、パフォーマンスと可用性を向上させるネットワークサービスを提供するシステムです。

以下は、Laravel のビューに Bootstrap のスタイルシート CDN リンクを導入するためのサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Laravel App</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
          crossorigin="anonymous">
</head>
<body>
    <!-- your html code here -->
</body>
</html>

ログイン後にコピー

上記のコードでは、Bootstrap の CDN を使用してスタイルシートを導入しています。これにより、ページの読み込みが速くなり、サーバーがファイル要求をサポートできるかどうかを心配する必要がなくなります。

SASS または LESS の使用

CSS または CDN リンクの使用は、スタイルシートを実装する効果的な方法ですが、大規模なプロジェクトでは、スタイルシートを管理し、整理するためのより高度なツールが必要になる場合があります。スタイルシート。

この場合、ネスト、ミックスイン、変数などのより高度な機能を提供する 2 つの一般的な CSS プリプロセッサである SASS または LESS を使用できます。

SASS または LESS の場合、スタイルシートをコンパイルするために関連するプラグインをインストールする必要があります。 SASS の場合は laravel/sass パッケージをインストールする必要があり、LESS の場合は laravel/less パッケージをインストールする必要があります。

たとえば、SASS を使用している場合は、ターミナルで次のコマンドを実行します: