Cập nhật lần cuối 7 tháng trước
Giải pháp/sử dụng cái này
{{ HTML::style['css/style.css'] }}
thay vì điều này
Cập nhật lần cuối cách đây 7 năm
Bất kỳ phản hồi nào về lý do tại sao điều này hoạt động và phiên bản html thô thì không?
Cập nhật lần cuối cách đây 7 năm
Đăng nhập để tham gia vào chủ đề này
Ví dụ: bạn có tệp css yourapp. css và tệp javascript yourapp. js, chúng cần được đặt trong các thư mục public/css và public/js tương ứng, để đường dẫn tệp của chúng trông như thế này
public/css/yourapp.css public/js/yourapp.js
Sau đó, trong tệp mẫu lưỡi cắt của bạn, trong tài nguyên/lượt xem/ứng dụng. lưỡi. php, bao gồm các tệp css và js như thế này
Bao gồm các tệp css và javascript bằng cách sử dụng gulp và exlixir trong Laravel
1. Tải xuống nút. js, công cụ xây dựng gulp cần npm, trình quản lý gói nút để tải xuống.
2. Chuyển đến thư mục gốc của dự án laravel của bạn và chạy các lệnh sau
npm install --global gulp npm install
3. Mở tập tin gulp. js nằm trong thư mục gốc của dự án Laravel của bạn, sao chép và dán đoạn mã sau để ghi đè lên nội dung hiện có bắt đầu từ dòng elixir[function[mix]
elixir[function[mix] { mix .sass['app.scss'] .styles[[ 'yourapp.css' ]] .scripts[[ 'yourapp.js' ]] .version[["public/css/all.css", "public/js/all.js"]]; }];
4. Tạo ba tệp này và thêm một số css và js vào đó
resources/assets/css/yourapp.css resources/assets/js/yourapp.css resources/assets/sass/app.scss
5. Chạy lệnh gulp để xây dựng css và js, nó sẽ tạo ra một css và js cuối cùng vào thư mục chung
Nếu muốn thay đổi giao diện của các thành phần Media Library Pro để phù hợp với kiểu ứng dụng của riêng bạn, bạn có nhiều tùy chọn
##Bạn có phải là người học trực quan không?
Trong video này, bạn sẽ thấy các tùy chọn khác nhau về cách tùy chỉnh giao diện của các thành phần
Bạn muốn xem nhiều video như thế này?
##Lựa chọn 1. Sử dụng cấu hình CSS Tailwind của riêng bạn
Thay vì nhập/liên kết
6 dựng sẵn từ gói, bạn có thể nhập
7 và chạy mọi quy tắc
8 thông qua /* app.css */
…
@import "src/styles.css";
.media-library-thumb-img {
@apply object-contain;
}
0 của riêng mình________số 8Đây chính xác là những gì xảy ra trong tiêu đề của trang chủ tại medialibrary. chuyên nghiệp. thành phần được hiển thị có giao diện hơi xanh lam, sử dụng bảng màu của trang web này
##Lựa chọn 2. Chỉ ghi đè các phần trong CSS của bạn
Nếu bạn chỉ muốn mày mò một số khía cạnh của thành phần nhưng muốn giữ CSS đồng bộ với các bản cập nhật gói trong tương lai, thì không có gì ngăn cản bạn chỉ ghi đè một số quy tắc CSS nhất định bằng các chỉnh sửa của riêng bạn. Mỗi phần tử DOM của thành phần có một lớp có tiền tố
/* app.css */
…
@import "src/styles.css";
.media-library-thumb-img {
@apply object-contain;
}
1Giả sử ngón tay cái của bạn không vuông và bạn muốn hiển thị chúng ở tỷ lệ khung hình ban đầu. Kiểm tra thành phần trong trình duyệt của bạn để biết rằng hình thu nhỏ được hiển thị trong phần tử DOM với lớp
/* app.css */
…
@import "src/styles.css";
.media-library-thumb-img {
@apply object-contain;
}
2. Tiếp theo, viết thêm một số CSS cho lớp này/* app.css */
…
@import "src/styles.css";
.media-library-thumb-img {
@apply object-contain;
}
##Lựa chọn 3. Sao chép CSS vào dự án của riêng bạn
Nếu bạn muốn sử dụng tùy chọn đầy đủ, bạn luôn có thể sao chép
7 vào dự án của riêng mình và bắt đầu. Trong ví dụ này, chúng tôi đã đổi tên tệp thành /* app.css */
…
@import "src/styles.css";
.media-library-thumb-img {
@apply object-contain;
}
4. coi chừng. bạn sẽ phải giữ CSS này đồng bộ theo cách thủ công với các thay đổi trong các bản cập nhật gói trong tương lai
3Một trong nhiều thay đổi mà chúng tôi muốn thực hiện là tách danh sách lỗi ở trên cùng và bo tròn các góc.
4Đây là những gì chúng tôi đã thực hiện trên bản demo Bộ sưu tập tùy chỉnh trên medialibrary. pro/demo-customized-collection. Chọn một tệp quá lớn để xem danh sách lỗi có hiệu lực
##Thanh lọcCSS
Nếu đang sử dụng PurgeCSS, bạn có thể phải thêm quy tắc vào mẫu danh sách cho phép của mình
5##Thay đổi thứ tự của các phần
Các thành phần có ba phần chính được hiển thị theo thứ tự này. lỗi xác thực, mục và trình tải lên
Bạn có thể thay đổi thứ tự của các phần này để phù hợp hơn với ứng dụng của mình mà không phải tạo thành phần tùy chỉnh từ đầu