Tôi có thể sử dụng CSS trong laravel không?

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ạn

Dễ 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ạn

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?

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

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

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ố 8

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.

/* 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');

0

Thay đổ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

Laravel sử dụng CSS gì?

Làm cách nào để thêm CSS vào phiến Laravel?

Làm cách nào để sử dụng CSS và js trong Laravel?