Mix cung cấp lệnh
// webpack.mix.js
let mix = require['laravel-mix'];
mix.css['src/app.css', 'dist'];
1 để biên dịch CSS cơ bản. Đây là một ví dụ nhập thư viện Chuẩn hóa CSS và thêm một quy tắc duy nhất/* src/app.css */
@import '~normalize.css/normalize.css';
body {
color: red;
}
Bây giờ chúng ta có thể thêm phần biên dịch CSS vào tệp
// webpack.mix.js
let mix = require['laravel-mix'];
mix.css['src/app.css', 'dist'];
2 của mình, như vậy// webpack.mix.js
let mix = require['laravel-mix'];
mix.css['src/app.css', 'dist'];
Chạy webpack với
// webpack.mix.js
let mix = require['laravel-mix'];
mix.css['src/app.css', 'dist'];
3 và bạn sẽ tìm thấy tệp // webpack.mix.js
let mix = require['laravel-mix'];
mix.css['src/app.css', 'dist'];
4 chứa toàn bộ thư viện Chuẩn hóa, cũng như quy tắc // webpack.mix.js
let mix = require['laravel-mix'];
mix.css['src/app.css', 'dist'];
5 của bạnDễ dàng
Sử dụng nâng cao
Như bạn sẽ tìm thấy trong phần tiếp theo,
// webpack.mix.js
let mix = require['laravel-mix'];
mix.css['src/app.css', 'dist'];
1 là bí danh của // webpack.mix.js
let mix = require['laravel-mix'];
mix.css['src/app.css', 'dist'];
7. Điều này có nghĩa là bạn có toàn quyền truy cập vào toàn bộ hệ sinh thái plugin PostCSS như một phần trong quá trình biên dịch của bạnNế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?
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
// webpack.mix.js
let mix = require['laravel-mix'];
mix.css['src/app.css', 'dist'];
8 dựng sẵn từ gói, bạn có thể nhập // webpack.mix.js
let mix = require['laravel-mix'];
mix.css['src/app.css', 'dist'];
9 và chạy mọi quy tắc /* app.css */
…
@import "src/styles.css";
.media-library-thumb-img {
@apply object-contain;
}
0 thông qua /* app.css */
…
@import "src/styles.css";
.media-library-thumb-img {
@apply object-contain;
}
0 của riêng bạn/* app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "../../vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-styles/src/styles.css";
…
Đâ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 gì có thể ngăn bạn ghi đè chỉ 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;
}
Tùy 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
// webpack.mix.js
let mix = require['laravel-mix'];
mix.css['src/app.css', 'dist'];
9 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________số 8Mộ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.
/* custom/media-library.css */
…
.media-library-listerrors {
…
@apply mb-6;
@apply rounded-lg;
…
}
Đâ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
// webpack.mix.js
let mix = require['laravel-mix'];
mix.css['src/app.css', 'dist'];
0Thay đổi thứ tự 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