Hướng dẫn how to change css in laravel - cách thay đổi css trong laravel
Đã hỏi 5 năm, 2 tháng trước 5 years, 2 months ago Show Đã xem 8k lần 8k times Laravel Noob ở đây, tôi đang phát triển ở Homestead. Ngay bây giờ, nếu tôi muốn chỉnh sửa một cái gì đó trong CSS của mình, tôi chỉnh sửa app.scss (nằm trong tài nguyên/tài sản/sass) sau đó biên dịch lại CSS của tôi với Mix. (NPM Run Dev) Tôi không biết đây có phải là cách chính xác để chỉnh sửa CSS của bạn không, nhưng lần cuối cùng tôi chỉnh sửa một cái gì đó, nó đã hoạt động. Nhưng bây giờ nó không và tôi bối rối. Tôi cũng sẽ đánh giá cao nó nếu ai đó sẽ cho tôi biết việc sử dụng _custom.scss và _variables.scss trong thư mục SASS là gì. Đã hỏi ngày 1 tháng 9 năm 2017 lúc 2:46Sep 1, 2017 at 2:46 1 Đây là cách chính xác. Tuy nhiên, bạn cần chạy 0 và 1 được gọi là các tệp một phần. Đó là một cách thuận tiện để tổ chức mã. Chăm sóc bạn muốn sử dụng các tệp một phần. Bạn sẽ phải nhập chúng vào tệp App.SCSS 2. Mặc dù bạn phải cẩn thận về thứ tự bạn nhập các tệp một phần, nhưng trong trường hợp bạn đang sử dụng các biến và mixin vì chúng cần được nhập trước trước các phần khác.Để biết thêm thông tin, hãy kiểm tra tài liệu SASS hoặc video nhà trên cây này Đã trả lời ngày 1 tháng 9 năm 2017 lúc 2:59Sep 1, 2017 at 2:59
Guttumeguttumeguttume 2581 Huy hiệu bạc7 Huy hiệu đồng1 silver badge7 bronze badges 1 Phiên bản
Giàn giáo JavaScript & CSS
Giới thiệuMặ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. CSSLaravel 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. JavaScriptLaravel 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ướcNế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 3 Artisan. Lệnh này, khi kết hợp với tùy chọn 4, sẽ xóa giàn giáo bootstrap và Vue khỏi ứng dụng của bạn, chỉ để lại một tệp SASS trống và một vài thư viện tiện ích JavaScript thông thường:
Viết CSSTệp 5 của Laravel bao gồm gói 6 để giúp bạn bắt đầu tạo mẫu cho ứng dụng của bạn bằng cách sử dụng bootstrap. Tuy nhiên, hãy thoải mái thêm hoặc xóa các gói khỏi tệp 5 khi cần thiết cho ứng dụng của riêng bạn. Bạn không bắt buộc phải sử dụng khung Bootstrap để xây dựng ứng dụng Laravel của mình - nó được cung cấp như một điểm khởi đầu tốt cho những người chọn sử dụng nó.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):
Khi các phụ thuộc đã được cài đặt bằng 8, bạn có thể biên dịch các tệp SASS của mình thành CSS đơn giản bằng cách sử dụng Laravel Mix. Lệnh npm run dev sẽ xử lý các hướng dẫn trong tệp 0 của bạn. Thông thường, CSS được biên dịch của bạn sẽ được đặt trong thư mục 1:
0 mặc định đi kèm với Laravel sẽ biên dịch tệp SASS 3. Tệp 4 này nhập một tệp các biến SASS và tải Bootstrap, cung cấp một điểm khởi đầu tốt cho hầu hết các ứng dụng. Vui lòng tùy chỉnh tệp 4 tuy nhiên bạn muốn hoặc thậm chí sử dụng bộ xử lý tiền hoàn toàn khác bằng cách định cấu hình Laravel Mix.Viết JavaScriptTấ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 5 trong thư mục gốc của dự án. Tệp này tương tự như tệp 7 ngoại trừ nó chỉ định các phụ thuộc JavaScript thay vì phụ thuộc PHP. Bạn có thể cài đặt các phụ thuộc này bằng Trình quản lý gói nút (NPM):
Khi các gói được cài đặt, bạn có thể sử dụng lệnh 0 của bạn:
Theo mặc định, tệp Laravel 0 biên dịch tệp SASS và tệp 6 của bạn. Trong tệp 7, bạn có thể đăng ký các thành phần VUE của mình hoặc, nếu bạn thích một khung khác, hãy định cấu hình ứng dụng JavaScript của riêng bạn. JavaScript được biên dịch của bạn thường sẽ được đặt trong thư mục 8.
Viết các thành phần VueTheo mặc định, các ứng dụng Laravel tươi chứa thành phần VUE 1 nằm trong thư mục 2. Tệp 1 là một ví dụ về một thành phần VUE tệp duy nhất xác định mẫu JavaScript và HTML của nó trong cùng một tệp. Các thành phần tệp duy nhất cung cấp một cách tiếp cận rất thuận tiện để xây dựng các ứng dụng điều khiển JavaScript. Thành phần ví dụ được đăng ký trong tệp 7 của bạn:
Để 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 5 Artisan để mang tính xác thực và màn hình đăng ký của ứng dụng của bạn, bạn có thể thả thành phần vào mẫu lưỡi 6:
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 ứngNế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 3 với tùy chọn 0:
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ụ. Tại sao CSS không hoạt động ở Laravel?Hãy thử sử dụng Mix để sao chép các tài sản từ /nhà cung cấp Dirs vào các dirs /công khai của bạn (tức là /công khai /CSS và /public /js). Sau đó sử dụng các đường dẫn đó cho tài sản của bạn trong HTML. Đừng nghĩ rằng bạn nên tải tài sản từ nhà cung cấp. (ie /public/css and /public/js). Then use those paths for your assets in the html. Don't think you should be loading assets from the vendor dir.
Làm thế nào bao gồm CSS và JS bên ngoài trong Laravel?Nếu bạn có một bên ngoài ... Sao chép mã bên ngoài của bạn .. Chạy lệnh npm cài đặt trong thiết bị đầu cuối của bạn .. Khi lệnh trên được thực thi, bạn có thể thấy một thư mục có tên node_modules .. Sau đó đi đến Tài nguyên/JS .. Mở ứng dụng tệp..... Cuộn xuống phía dưới và dán JS bên ngoài của bạn .. NPM ở Laravel là gì?Bạn có thể cài đặt các phụ thuộc này bằng Trình quản lý gói nút (NPM): Cài đặt NPM.Theo mặc định, gói Laravel.Tệp JSON bao gồm một vài gói như Vue và Axios để giúp bạn bắt đầu xây dựng ứng dụng JavaScript của mình.Node package manager (NPM): npm install. By default, the Laravel package. json file includes a few packages such as vue and axios to help you get started building your JavaScript application.
Laravel có đi kèm với bootstrap không?Sau khi cài đặt gói Composer Laravel/UI và tạo giàn giáo phía trước, tệp Laravel's Gói.json sẽ bao gồm gói Bootstrap để giúp bạn bắt đầu tạo mẫu cho ứng dụng của bạn bằng cách sử dụng Bootstrap.Tuy nhiên, hãy thoải mái thêm hoặc xóa các gói khỏi gói.Laravel's package. json file will include the bootstrap package to help you get started prototyping your application's frontend using Bootstrap. However, feel free to add or remove packages from the package. |