Laravel thêm css vào lưỡi

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;
}

1

Giả 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

3

Mộ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

Làm cách nào để thêm css vào tệp phiến laravel?

Làm cách nào để thêm css tùy chỉnh trong laravel 8?

Viết css ở đâu trong laravel?

Làm cách nào để thêm JavaScript vào lưỡi laravel?