App js và app css không tìm thấy trong laravel

Laravel Mix, một gói được phát triển bởi Jeffrey Way, người tạo ra Laracasts, cung cấp API thông thạo để xác định các bước xây dựng webpack cho ứng dụng Laravel của bạn bằng cách sử dụng một số bộ xử lý trước CSS và JavaScript phổ biến

Nói cách khác, Mix làm cho việc biên dịch và thu nhỏ các tệp CSS và JavaScript của ứng dụng của bạn trở nên dễ dàng. Thông qua chuỗi phương thức đơn giản, bạn có thể xác định thành thạo quy trình tài sản của mình. Ví dụ

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css');

Nếu bạn đã từng bối rối và choáng ngợp khi bắt đầu với webpack và biên dịch nội dung, thì bạn sẽ thích Laravel Mix. Tuy nhiên, bạn không bắt buộc phải sử dụng nó trong khi phát triển ứng dụng của mình;

{tip} Nếu bạn cần bắt đầu xây dựng ứng dụng của mình bằng Laravel và Tailwind CSS, hãy xem một trong các bộ công cụ dành cho người mới bắt đầu ứng dụng của chúng tôi

Cài đặt & Thiết lập

Cài đặt nút

Trước khi chạy Mix, trước tiên bạn phải đảm bảo rằng Node. js và NPM được cài đặt trên máy của bạn

Bạn có thể dễ dàng cài đặt phiên bản mới nhất của Node và NPM bằng trình cài đặt đồ họa đơn giản từ trang web chính thức của Node. Hoặc, nếu bạn đang sử dụng Laravel Sail, bạn có thể gọi Node và NPM thông qua Sail

Cài đặt Laravel Mix

Bước duy nhất còn lại là cài đặt Laravel Mix. Trong bản cài đặt mới của Laravel, bạn sẽ tìm thấy tệp

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [

2 trong thư mục gốc của cấu trúc thư mục của mình. Tệp

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [

2 mặc định đã bao gồm mọi thứ bạn cần để bắt đầu sử dụng Laravel Mix. Hãy coi tệp này giống như tệp

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [

4 của bạn, ngoại trừ nó xác định các phần phụ thuộc của Nút thay vì các phần phụ thuộc của PHP. Bạn có thể cài đặt các phụ thuộc mà nó tham chiếu bằng cách chạy

Chạy hỗn hợp

Mix là một lớp cấu hình trên cùng của webpack, vì vậy để chạy các tác vụ Mix của bạn, bạn chỉ cần thực thi một trong các tập lệnh NPM được bao gồm trong tệp Laravel

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [

2 mặc định. Khi bạn chạy tập lệnh

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [

6 hoặc

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [

7, tất cả nội dung CSS và JavaScript của ứng dụng của bạn sẽ được biên dịch và đặt trong thư mục

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [

8 của ứng dụng

________số 8_______

Theo dõi tài sản để thay đổi

Lệnh

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [

9 sẽ tiếp tục chạy trong thiết bị đầu cuối của bạn và xem tất cả các tệp CSS và JavaScript có liên quan để biết các thay đổi. Webpack sẽ tự động biên dịch lại nội dung của bạn khi phát hiện thay đổi đối với một trong các tệp này

Webpack có thể không phát hiện được các thay đổi tệp của bạn trong một số môi trường phát triển cục bộ. Nếu trường hợp này xảy ra trên hệ thống của bạn, hãy cân nhắc sử dụng lệnh

0

Làm việc với các biểu định kiểu

Tệp

1 của ứng dụng của bạn là điểm khởi đầu cho tất cả quá trình biên dịch tài sản. Hãy nghĩ về nó như một trình bao bọc cấu hình nhẹ xung quanh webpack. Các tác vụ hỗn hợp có thể được xâu chuỗi lại với nhau để xác định chính xác cách biên dịch nội dung của bạn

CSS đuôi gió

Tailwind CSS là một khung hiện đại, ưu tiên tiện ích để xây dựng các trang web tuyệt vời mà không cần rời khỏi HTML của bạn. Hãy tìm hiểu cách bắt đầu sử dụng nó trong dự án Laravel với Laravel Mix. Trước tiên, chúng ta nên cài đặt Tailwind bằng NPM và tạo tệp cấu hình Tailwind

Lệnh

2 sẽ tạo tệp

3. Phần

4 của tệp này cho phép bạn định cấu hình đường dẫn đến tất cả các mẫu HTML, thành phần JavaScript và bất kỳ tệp nguồn nào khác có chứa tên lớp Tailwind để mọi lớp CSS không được sử dụng trong các tệp này sẽ bị xóa khỏi sản phẩm của bạn

    './storage/framework/views/*.php',
    './resources/**/*.blade.php',

Tiếp theo, bạn nên thêm từng "lớp" của Tailwind vào tệp

5 của ứng dụng

Sau khi định cấu hình các lớp của Tailwind, bạn đã sẵn sàng cập nhật tệp

1 của ứng dụng để biên dịch CSS do Tailwind cung cấp

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [

Cuối cùng, bạn nên tham chiếu biểu định kiểu của mình trong mẫu bố cục chính của ứng dụng. Nhiều ứng dụng chọn lưu trữ mẫu này tại

7. Ngoài ra, đảm bảo bạn thêm thẻ chế độ xem đáp ứng

8 nếu thẻ này chưa có

đăngCSS

PostCSS, một công cụ mạnh mẽ để chuyển đổi CSS của bạn, được bao gồm trong Laravel Mix ngay lập tức. Theo mặc định, Mix tận dụng plugin Autoprefixer phổ biến để tự động áp dụng tất cả các tiền tố nhà cung cấp CSS3 cần thiết. Tuy nhiên, bạn có thể tự do thêm bất kỳ plugin bổ sung nào phù hợp với ứng dụng của mình

Trước tiên, hãy cài đặt plugin mong muốn thông qua NPM và đưa nó vào mảng plugin của bạn khi gọi phương thức

9 của Mix. Phương thức

9 chấp nhận đường dẫn đến tệp CSS của bạn làm đối số đầu tiên và thư mục chứa tệp đã biên dịch sẽ được đặt làm đối số thứ hai

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')

Hoặc, bạn có thể thực thi

9 mà không cần bổ sung plugin để đạt được quá trình biên dịch và thu nhỏ CSS đơn giản

mix.postCss('resources/css/app.css', 'public/css');

ngổ ngáo

Phương pháp

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')

2 cho phép bạn biên dịch Sass thành CSS mà trình duyệt web có thể hiểu được. Phương thức

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')

2 chấp nhận đường dẫn đến tệp Sass của bạn làm đối số đầu tiên và thư mục chứa tệp đã biên dịch sẽ được đặt làm đối số thứ hai

mix.sass('resources/sass/app.scss', 'public/css');

Bạn có thể biên dịch nhiều tệp Sass thành các tệp CSS tương ứng của riêng chúng và thậm chí tùy chỉnh thư mục đầu ra của CSS kết quả bằng cách gọi phương thức

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')

2 nhiều lần

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

Xử lý URL

Bởi vì Laravel Mix được xây dựng trên webpack, điều quan trọng là phải hiểu một vài khái niệm về webpack. Để biên dịch CSS, webpack sẽ viết lại và tối ưu hóa bất kỳ lệnh gọi

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')

5 nào trong biểu định kiểu của bạn. Mặc dù điều này ban đầu nghe có vẻ lạ, nhưng đây là một phần chức năng cực kỳ mạnh mẽ. Hãy tưởng tượng rằng chúng tôi muốn biên dịch Sass bao gồm một URL tương đối thành một hình ảnh

    background: url('../images/example.png');

{note} Đường dẫn tuyệt đối cho bất kỳ

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')

5 cụ thể nào sẽ bị loại trừ khỏi quá trình viết lại URL. Ví dụ:

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')

7 hoặc

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')

8 sẽ không được sửa đổi

Theo mặc định, Laravel Mix và webpack sẽ tìm thấy

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')

9, sao chép nó vào thư mục

mix.postCss('resources/css/app.css', 'public/css');

0 của bạn, sau đó viết lại

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')

5 trong biểu định kiểu đã tạo của bạn. Như vậy, CSS được biên dịch của bạn sẽ là

// Run all Mix tasks and minify output...

0

Dù tính năng này có hữu ích đến đâu, cấu trúc thư mục hiện tại của bạn có thể đã được định cấu hình theo cách bạn muốn. Nếu trường hợp này xảy ra, bạn có thể vô hiệu hóa việc viết lại

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')

5 như vậy

// Run all Mix tasks and minify output...

1

Với việc bổ sung này vào tệp

1 của bạn, Mix sẽ không còn khớp với bất kỳ

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')

5 nào hoặc sao chép nội dung vào thư mục công khai của bạn. Nói cách khác, CSS được biên dịch sẽ trông giống như cách bạn gõ ban đầu

// Run all Mix tasks and minify output...

2

Bản đồ nguồn

Mặc dù bị tắt theo mặc định, bản đồ nguồn có thể được kích hoạt bằng cách gọi phương thức

mix.postCss('resources/css/app.css', 'public/css');

5 trong tệp

1 của bạn. Mặc dù nó đi kèm với chi phí biên dịch/hiệu suất, nhưng điều này sẽ cung cấp thêm thông tin gỡ lỗi cho các công cụ dành cho nhà phát triển của trình duyệt của bạn khi sử dụng nội dung đã biên dịch

// Run all Mix tasks and minify output...

3

Phong cách lập bản đồ nguồn

Webpack cung cấp nhiều loại. Theo mặc định, kiểu ánh xạ nguồn của Mix được đặt thành

mix.postCss('resources/css/app.css', 'public/css');

7, cung cấp thời gian xây dựng lại nhanh. Nếu bạn muốn thay đổi kiểu ánh xạ, bạn có thể làm như vậy bằng cách sử dụng phương pháp

mix.postCss('resources/css/app.css', 'public/css');

8

// Run all Mix tasks and minify output...

4

Làm việc với JavaScript

Mix cung cấp một số tính năng để giúp bạn làm việc với các tệp JavaScript của mình, chẳng hạn như biên dịch ECMAScript hiện đại, gói mô-đun, thu nhỏ và nối các tệp JavaScript đơn giản. Thậm chí tốt hơn, tất cả điều này hoạt động trơn tru mà không yêu cầu một chút cấu hình tùy chỉnh nào

// Run all Mix tasks and minify output...

5

Với một dòng mã này, giờ đây bạn có thể tận dụng lợi thế của

• Cú pháp EcmaScript mới nhất
• mô-đun
• Giảm thiểu cho môi trường sản xuất

Vue

Mix sẽ tự động cài đặt các plugin Babel cần thiết để hỗ trợ biên dịch thành phần tệp đơn Vue khi sử dụng phương thức

mix.postCss('resources/css/app.css', 'public/css');

9. Không cần cấu hình thêm

// Run all Mix tasks and minify output...

3

Khi JavaScript của bạn đã được biên dịch, bạn có thể tham khảo nó trong ứng dụng của mình

// Run all Mix tasks and minify output...

7

Phản ứng

Mix có thể tự động cài đặt các plugin Babel cần thiết để hỗ trợ React. Để bắt đầu, hãy thêm lệnh gọi vào phương thức

mix.sass('resources/sass/app.scss', 'public/css');

0

// Run all Mix tasks and minify output...

8

Đằng sau hậu trường, Mix sẽ tải xuống và bao gồm plugin

mix.sass('resources/sass/app.scss', 'public/css');

1 Babel thích hợp. Khi JavaScript của bạn đã được biên dịch, bạn có thể tham khảo nó trong ứng dụng của mình

// Run all Mix tasks and minify output...

7

khai thác nhà cung cấp

Một nhược điểm tiềm ẩn khi kết hợp tất cả JavaScript dành riêng cho ứng dụng của bạn với các thư viện của nhà cung cấp như React và Vue là nó khiến việc lưu vào bộ nhớ đệm dài hạn trở nên khó khăn hơn. Ví dụ: một lần cập nhật mã ứng dụng của bạn sẽ buộc trình duyệt tải xuống lại tất cả các thư viện của nhà cung cấp của bạn ngay cả khi chúng không thay đổi

Nếu bạn có ý định cập nhật thường xuyên cho JavaScript của ứng dụng của mình, bạn nên cân nhắc trích xuất tất cả các thư viện của nhà cung cấp vào tệp của riêng họ. Bằng cách này, thay đổi đối với mã ứng dụng của bạn sẽ không ảnh hưởng đến bộ nhớ đệm của tệp

mix.sass('resources/sass/app.scss', 'public/css');

2 lớn của bạn. Phương pháp

mix.sass('resources/sass/app.scss', 'public/css');

3 của Mix khiến việc này trở nên dễ dàng

// Run all Mix tasks and minify output...

3

Phương thức

mix.sass('resources/sass/app.scss', 'public/css');

3 chấp nhận một mảng gồm tất cả các thư viện hoặc mô-đun mà bạn muốn trích xuất thành tệp

mix.sass('resources/sass/app.scss', 'public/css');

2. Sử dụng đoạn mã trên làm ví dụ, Mix sẽ tạo các tệp sau

• mix.sass('resources/sass/app.scss', 'public/css');

  6. Thời gian chạy tệp kê khai Webpack

• mix.sass('resources/sass/app.scss', 'public/css');

  7. Thư viện nhà cung cấp của bạn

• mix.sass('resources/sass/app.scss', 'public/css');

  8. Mã ứng dụng của bạn

Để tránh lỗi JavaScript, hãy đảm bảo tải các tệp này theo đúng thứ tự

    './storage/framework/views/*.php',
    './resources/**/*.blade.php',

1

Cấu hình Webpack tùy chỉnh

Đôi khi, bạn có thể cần sửa đổi cấu hình Webpack bên dưới theo cách thủ công. Ví dụ: bạn có thể có một trình tải hoặc plugin đặc biệt cần được tham khảo

Mix cung cấp một phương pháp

mix.sass('resources/sass/app.scss', 'public/css');

9 hữu ích cho phép bạn hợp nhất bất kỳ ghi đè cấu hình Webpack ngắn nào. Điều này đặc biệt hấp dẫn, vì nó không yêu cầu bạn sao chép và duy trì bản sao tệp

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

0 của riêng bạn. Phương thức

mix.sass('resources/sass/app.scss', 'public/css');

9 chấp nhận một đối tượng, đối tượng này sẽ chứa bất kỳ cấu hình dành riêng cho Webpack nào mà bạn muốn áp dụng

    './storage/framework/views/*.php',
    './resources/**/*.blade.php',

2

Lập phiên bản/Xóa bộ nhớ cache

Nhiều nhà phát triển thêm hậu tố nội dung đã biên dịch của họ bằng dấu thời gian hoặc mã thông báo duy nhất để buộc trình duyệt tải nội dung mới thay vì cung cấp các bản sao cũ của mã. Mix có thể tự động xử lý việc này cho bạn bằng cách sử dụng phương pháp

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

2

Phương thức

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

2 sẽ nối một hàm băm duy nhất vào tên tệp của tất cả các tệp đã biên dịch, cho phép xóa bộ nhớ cache thuận tiện hơn

// Run all Mix tasks and minify output...

3

Sau khi tạo tệp được phiên bản, bạn sẽ không biết tên tệp chính xác. Vì vậy, bạn nên sử dụng hàm toàn cầu

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

4 của Laravel trong chế độ xem của mình để tải nội dung được băm phù hợp. Hàm

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

4 sẽ tự động xác định tên hiện tại của tệp được băm

    './storage/framework/views/*.php',
    './resources/**/*.blade.php',

4

Vì các tệp được tạo phiên bản thường không cần thiết trong quá trình phát triển, nên bạn có thể hướng dẫn quy trình tạo phiên bản chỉ chạy trong thời gian

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

6

// Run all Mix tasks and minify output...

5

URL cơ sở kết hợp tùy chỉnh

Nếu nội dung đã biên dịch Kết hợp của bạn được triển khai tới CDN tách biệt với ứng dụng của bạn, thì bạn sẽ cần thay đổi URL cơ sở được tạo bởi hàm

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

4. Bạn có thể làm như vậy bằng cách thêm tùy chọn cấu hình

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

8 vào tệp cấu hình

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

9 của ứng dụng của bạn

    './storage/framework/views/*.php',
    './resources/**/*.blade.php',

6

Sau khi định cấu hình URL trộn, hàm

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

4 sẽ thêm tiền tố vào URL đã định cấu hình khi tạo URL cho nội dung

    './storage/framework/views/*.php',
    './resources/**/*.blade.php',

7

Đang tải lại đồng bộ hóa trình duyệt

BrowserSync có thể tự động giám sát các tệp của bạn để biết các thay đổi và đưa các thay đổi của bạn vào trình duyệt mà không yêu cầu làm mới thủ công. Bạn có thể kích hoạt hỗ trợ cho việc này bằng cách gọi phương thức

    background: url('../images/example.png');

1

    './storage/framework/views/*.php',
    './resources/**/*.blade.php',

8

Các tùy chọn BrowserSync có thể được chỉ định bằng cách chuyển một đối tượng JavaScript tới phương thức

    background: url('../images/example.png');

2

Tiếp theo, khởi động máy chủ phát triển của webpack bằng lệnh

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [

9. Giờ đây, khi bạn sửa đổi tập lệnh hoặc tệp PHP, bạn có thể xem khi trình duyệt làm mới trang ngay lập tức để phản ánh các thay đổi của bạn

Biến môi trường

Bạn có thể đưa các biến môi trường vào tập lệnh

1 của mình bằng cách thêm tiền tố vào một trong các biến môi trường trong tệp

    background: url('../images/example.png');

5 của bạn bằng ____________6

    './storage/framework/views/*.php',
    './resources/**/*.blade.php',

9

Sau khi biến đã được xác định trong tệp

    background: url('../images/example.png');

5 của bạn, bạn có thể truy cập nó thông qua đối tượng

    background: url('../images/example.png');

8. Tuy nhiên, bạn sẽ cần khởi động lại tác vụ nếu giá trị của biến môi trường thay đổi trong khi tác vụ đang chạy

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [

0

thông báo

Khi khả dụng, Mix sẽ tự động hiển thị các thông báo của hệ điều hành khi biên dịch, cung cấp cho bạn phản hồi tức thì về việc biên dịch có thành công hay không. Tuy nhiên, có thể có những trường hợp bạn muốn tắt các thông báo này. Một ví dụ như vậy có thể đang kích hoạt Mix trên máy chủ sản xuất của bạn. Thông báo có thể bị hủy kích hoạt bằng phương pháp

    background: url('../images/example.png');

9

Cách khắc phục lỗi 404 với app js và app css trong laravel?

Việc sử dụng APP JS trong laravel là gì?

Laravel có hỗ trợ JavaScript không?