Heim > Artikel > PHP-Framework > Erfahren Sie, wie Sie Stile in Laravel einführen

Erfahren Sie, wie Sie Stile in Laravel einführen

PHPzOriginal: 2023-04-21 10:12:18941Durchsuche

Laravel ist heute eines der beliebtesten PHP-Frameworks und bietet Entwicklern eine Möglichkeit, schnell moderne Webanwendungen zu entwickeln. Im Vergleich zur herkömmlichen Art, PHP zu schreiben, sind viele Funktionen von Laravel automatisiert, sodass wir leistungsstarke Anwendungen schneller erstellen können. In diesem Artikel erfahren Sie, wie Sie Stile in Laravel einführen.

CSS-Dateien verwenden

In Laravel können wir herkömmliche CSS-Dateien als Stylesheets verwenden. Erstellen Sie ein CSS-Verzeichnis unter dem öffentlichen Verzeichnis und platzieren Sie Ihre CSS-Dateien darin. Wenn Ihre Datei beispielsweise style.css heißt, sieht Ihre Verzeichnisstruktur wie folgt aus:

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

Um dieses Stylesheet auf Ihre Ansicht anzuwenden, müssen Sie das HTML-Link-Tag in der Ansicht verwenden. Dieses Tag befindet sich im Head-Tag (<head>) der Ansicht. Angenommen, Ihre Ansicht befindet sich in resources/views/index.blade.php, dann sieht Ihr Code folgendermaßen aus: <head>）标记中。假设您的视图位于resources/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>

请注意，在link标记中，我们使用Laravel的asset助手函数来指定CSS文件的路径。该方法返回您的应用程序URL的完整路径，因此它们可以在网页中加载。

使用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链接是实现样式表的有效方法，但在大型项目中，您可能需要更高级的工具来管理和组织您的样式表。

在这种情况下，您可以使用SASS或LESS，这是两个流行的CSS预处理器，它们提供了更高级的特性，如嵌套，混入和变量。

对于SASS或LESS，您需要安装相关插件来编译您的样式表。对于SASS，您需要安装laravel/sass包，对于LESS，您需要安装laravel/less包。

例如，如果您使用的是SASS，请执行以下操作在终端中运行以下命令：

composer require laravel/sass

一旦安装了这个包，你就可以在Laravel的静态资源文件夹中创建一个sass目录。这个sass目录中将是您的SASS文件（.scss）。然后，您可以通过运行以下命令将您的SASS文件编译为CSS文件：

npm run dev

这个命令将使用Laravel Mix来编译和打包您的静态资源文件。

最后，通过在视图中引入编译后的CSS文件即可使用SASS样式表，就像本文第一部分中展示的那样。

总结

在Laravel中引入样式表可以采用传统CSS文件，CDN链接或使用SASS或LESS进行CSS预处理。我们可以使用HTML的<link>rrreee

Bitte beachten Sie, dass wir im Link-Tag die Asset-Hilfsfunktion von Laravel verwenden, um den Pfad zur CSS-Datei anzugeben. Diese Methode gibt den vollständigen Pfad zu Ihrer Anwendungs-URL zurück, damit diese auf die Webseite geladen werden können. 🎜

laravel/sass

laravel/less

sass im Code>-Verzeichnis des statischen Ressourcenordners von Laravel erstellen . In diesem <code>sass

.scss

<link>

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie Stile in Laravel einführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php laravel css bootstrap less scss html sass 预处理器 public 样式表自动化

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So ändern Sie den Inhalt der .env-Datei von LaravelNächster Artikel：So ändern Sie den Inhalt der .env-Datei von Laravel

In Verbindung stehende Artikel

Mehr sehen