Hướng dẫn app.css not found laravel 8 - app.css không tìm thấy laravel 8

Cảnh báo bạn đang duyệt tài liệu cho một phiên bản cũ của Laravel. Xem xét nâng cấp dự án của bạn lên Laravel 9.x. You're browsing the documentation for an old version of Laravel. Consider upgrading your project to Laravel 9.x.

Giàn giáo JavaScript & CSS

• Giới thiệu
• Viết CSS
• Viết JavaScript
  • Viết các thành phần Vue
  • Sử dụng phản ứng

Giới thiệu

Mặc dù Laravel không ra lệnh cho các bộ xử lý trước JavaScript hoặc CSS mà bạn sử dụng, nhưng nó cung cấp một điểm khởi đầu cơ bản bằng cách sử dụng bootstrap và VUE sẽ hữu ích cho nhiều ứng dụng. Theo mặc định, Laravel sử dụng NPM để cài đặt cả hai gói frontend này.

CSS

Laravel Mix cung cấp một API rõ ràng, biểu cảm trên việc biên dịch SAS hoặc ít hơn, là phần mở rộng của CSS đơn giản thêm các biến, mixin và các tính năng mạnh mẽ khác giúp làm việc với CSS thú vị hơn nhiều. Trong tài liệu này, chúng tôi sẽ thảo luận ngắn gọn về tổng hợp CSS nói chung; Tuy nhiên, bạn nên tham khảo tài liệu đầy đủ Laravel Mix để biết thêm thông tin về việc biên dịch SASS hoặc ít hơn.

JavaScript

Laravel không yêu cầu bạn sử dụng một khung JavaScript hoặc thư viện cụ thể để xây dựng các ứng dụng của bạn. Trên thực tế, bạn không phải sử dụng JavaScript. Tuy nhiên, Laravel bao gồm một số giàn giáo cơ bản để giúp bắt đầu viết JavaScript hiện đại dễ dàng hơn bằng thư viện Vue. Vue cung cấp một API biểu cảm để xây dựng các ứng dụng JavaScript mạnh mẽ bằng các thành phần. Cũng như CSS, chúng tôi có thể sử dụng Laravel Mix để dễ dàng biên dịch các thành phần JavaScript thành một tệp JavaScript sẵn sàng cho trình duyệt.

Xóa giàn giáo phía trước

Nếu bạn muốn xóa giàn giáo phía trước khỏi ứng dụng của mình, bạn có thể sử dụng lệnh

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

php artisan preset none

Viết CSS

Tệp

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

Trước khi biên dịch CSS của bạn, hãy cài đặt các phụ thuộc frontend của dự án bằng Trình quản lý gói nút (NPM):

npm install

Khi các phụ thuộc đã được cài đặt bằng

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

npm run dev

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

npm run dev

npm install

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

Viết JavaScript

Tất cả các phụ thuộc JavaScript theo yêu cầu của ứng dụng của bạn có thể được tìm thấy trong tệp

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

npm install

{Tip} Theo mặc định, tệp Laravel

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

2 bao gồm một vài gói như

6 và

7 để giúp bạn bắt đầu xây dựng ứng dụng JavaScript của mình. Vui lòng thêm hoặc xóa khỏi tệp

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

2 khi cần thiết cho ứng dụng của riêng bạn.

Khi các gói được cài đặt, bạn có thể sử dụng lệnh

npm run dev

npm run dev

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

npm install

Theo mặc định, tệp Laravel

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

npm i vue-loader

npm i vue-loader

npm i vue-loader

{Tip} Tệp

npm i vue-loader

4 sẽ tải tệp

npm i vue-loader

7 bootstraps và định cấu hình Vue, Axios, JQuery và tất cả các phụ thuộc JavaScript khác. Nếu bạn có thêm phụ thuộc JavaScript để định cấu hình, bạn có thể làm như vậy trong tệp này.

Viết các thành phần Vue

Theo mặc định, các ứng dụng Laravel mới chứa thành phần VUE

npm i vue-loader

npm i vue-loader

npm i vue-loader

npm i vue-loader

npm install

Để sử dụng thành phần trong ứng dụng của bạn, bạn có thể thả nó vào một trong các mẫu HTML của bạn. Ví dụ: sau khi chạy lệnh

npm run dev

npm run dev

npm install

{tip} Hãy nhớ rằng, bạn nên chạy lệnh

npm run dev

0 mỗi khi bạn thay đổi thành phần Vue. Hoặc, bạn có thể chạy lệnh

npm run dev

5 để giám sát và tự động biên dịch lại các thành phần của bạn mỗi khi chúng được sửa đổi.

Nếu bạn quan tâm đến việc tìm hiểu thêm về việc viết các thành phần Vue, bạn nên đọc tài liệu Vue, cung cấp một cái nhìn tổng quan kỹ lưỡng, dễ đọc về toàn bộ khung Vue.

Sử dụng phản ứng

Nếu bạn thích sử dụng React để xây dựng ứng dụng JavaScript của mình, Laravel sẽ biến nó thành một bản cinch để trao đổi giàn giáo Vue với giàn giáo React. Trên bất kỳ ứng dụng Laravel mới nào, bạn có thể sử dụng lệnh

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import 'bootstrap';

// Font Awesome
@import '@fortawesome/fontawesome-free';

npm run dev

npm install

Lệnh đơn này sẽ loại bỏ giàn giáo Vue và thay thế nó bằng giàn giáo React, bao gồm một thành phần ví dụ.