Tại sao css không hoạt động trong laravel?

Sự mô tả

Laravel mix không thể trích xuất css từ thành phần vue và ném lỗi

gói web. pha trộn. js

let mix = require('laravel-mix');
const del = require('del');
const tailwindcss = require('tailwindcss');

del('./public');
mix
    .setPublicPath('public')
    .webpackConfig({
        optimization: {
            providedExports: false,
            sideEffects: false,
            usedExports: false
        }
    })
    .js('resources/src/js/app.js', 'public/js/')
    .sass('resources/src/sass/vendor.scss', 'css')
    .sass('resources/src/sass/landing.scss', 'css')
    .sass('resources/src/sass/app.scss', 'css')
    .copyDirectory('resources/src/img', './public/img')
    .copyDirectory('resources/src/font', './public/font')
    .copy('resources/src/favicon.ico', './public/favicon.ico')
    .vue({
        extractStyles: true
    })
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')]
    }).extract();

thành phần Vue


  

Khi chạy lệnh trộn cho đồng hồ và truy cập trang đã báo lỗi sau.

Tại sao css không hoạt động trong laravel?

Giải pháp khả thi cho vấn đề trên là gì?

@AnasT Không, cái đó không hoạt động. BDW, tôi cảm thấy điều đó có liên quan đến mã mẫu BLADE. Nhưng, tôi không sử dụng mẫu BLADE. Tôi chỉ đang sử dụng PHP đơn giản trong tệp XEM của mình

Cập nhật lần cuối 7 tháng trước

Đó là mã Blade, nhưng nó không thành vấn đề - lặp lại nó. Nếu nó vẫn không hoạt động - bạn cần kiểm tra bảng điều khiển trong trình duyệt của mình và xem tại sao nó không tải


Laravel cung cấp những người trợ giúp này (xem thêm HTML. phong cách và HTML. script) để làm cho cuộc sống dễ dàng hơn, bạn nên sử dụng chúng

Cập nhật lần cuối 7 tháng trước

@AndrewBNZ Tôi đã mắc phải một sai lầm ngớ ngẩn. Tôi chỉ quên bao gồm những 'tiếng vang' trong báo cáo của tôi. Cảm ơn rất nhiều lần nữa

Mặc dù Laravel không chỉ định bạn sử dụng bộ tiền xử lý JavaScript hay CSS nào, nhưng nó cung cấp một điểm khởi đầu cơ bản bằng cách sử dụng Bootstrap và Vue sẽ hữu ích cho nhiều ứng dụng. Theo mặc định, Laravel sử dụng NPM để cài đặt cả hai gói giao diện người dùng này

Laravel Mix cung cấp một API rõ ràng, biểu cảm qua việc biên dịch SASS hoặc Ít hơn, là các phần mở rộng của CSS đơn giản có thêm các biến, mixin và các tính năng mạnh mẽ khác giúp làm việc với CSS thú vị hơn nhiều. Trong tài liệu này, chúng ta sẽ thảo luận ngắn gọn về việc biên dịch CSS nói chung;

Laravel không yêu cầu bạn sử dụng một framework hoặc thư viện JavaScript cụ thể để xây dựng các ứng dụng của bạn. Trên thực tế, bạn hoàn toàn không phải sử dụng JavaScript. Tuy nhiên, Laravel có bao gồm một số giàn giáo cơ bản để giúp bạn bắt đầu viết JavaScript hiện đại dễ dàng hơn bằng thư viện Vue. Vue cung cấp API biểu cảm để xây dựng các ứng dụng JavaScript mạnh mẽ bằng cách sử dụng các thành phần. Cũng như CSS, chúng ta có thể sử dụng Laravel Mix để dễ dàng biên dịch các thành phần JavaScript thành một tệp JavaScript duy nhất, sẵn sàng cho trình duyệt

Loại bỏ Giàn giáo Frontend

Nếu bạn muốn xóa giàn giáo giao diện người dùng khỏi ứng dụng của mình, bạn có thể sử dụng lệnh Artisan


  

4. Lệnh này, khi được kết hợp với tùy chọn

  

5, sẽ loại bỏ giàn giáo Bootstrap và Vue khỏi ứng dụng của bạn, chỉ để lại một tệp SASS trống và một số thư viện tiện ích JavaScript phổ biến

Viết CSS

Tệp


  

6 của Laravel bao gồm gói

  

7 để giúp bạn bắt đầu tạo mẫu giao diện người dùng của ứng dụng bằng Bootstrap. Tuy nhiên, vui lòng thêm hoặc xóa các gói khỏi tệp

  

6 nếu cần cho ứng dụng của riêng bạn. Bạn không bắt buộc phải sử dụng khung Bootstrap để xây dựng ứng dụng Laravel của mình - nó được cung cấp như một điểm khởi đầu tốt cho những ai chọn sử dụng nó

Trước khi biên dịch CSS của bạn, hãy cài đặt các phần phụ thuộc giao diện người dùng của dự án bằng trình quản lý gói Node (NPM)

Khi các phần phụ thuộc đã được cài đặt bằng cách sử dụng


  

9, bạn có thể biên dịch các tệp SASS của mình thành CSS đơn giản bằng cách sử dụng Laravel Mix. Lệnh

0 sẽ xử lý các hướng dẫn trong tệp

1 của bạn. Thông thường, CSS đã biên dịch của bạn sẽ được đặt trong thư mục

0


1 mặc định đi kèm với Laravel sẽ biên dịch tệp

2 SASS. Tệp

3 này nhập một tệp gồm các biến SASS và tải Bootstrap, đây là điểm khởi đầu tốt cho hầu hết các ứng dụng. Vui lòng tùy chỉnh tệp

3 theo bất kỳ cách nào bạn muốn hoặc thậm chí sử dụng một bộ tiền xử lý hoàn toàn khác bằng cách định cấu hình Laravel Mix

Viết JavaScript

Tất cả các phụ thuộc JavaScript mà ứng dụng của bạn yêu cầu có thể được tìm thấy trong tệp


  

6 trong thư mục gốc của dự án. Tệp này tương tự như tệp

6 ngoại trừ nó chỉ định phần phụ thuộc JavaScript thay vì phần phụ thuộc PHP. Bạn có thể cài đặt các phụ thuộc này bằng trình quản lý gói Node (NPM)

{tip} Theo mặc định, tệp Laravel


  

6 bao gồm một số gói như

8 và

9 để giúp bạn bắt đầu xây dựng ứng dụng JavaScript của mình. Vui lòng thêm hoặc xóa khỏi tệp

  

6 nếu cần cho ứng dụng của riêng bạn

Khi các gói được cài đặt, bạn có thể sử dụng lệnh


0 để biên dịch nội dung của mình. Webpack là gói mô-đun cho các ứng dụng JavaScript hiện đại. Khi bạn chạy lệnh

0, Webpack sẽ thực hiện các hướng dẫn trong tệp

1 của bạn

Theo mặc định, tệp Laravel


1 biên dịch SASS của bạn và tệp

  

45. Trong tệp

  

46, bạn có thể đăng ký các thành phần Vue của mình hoặc, nếu bạn thích một khung khác, hãy định cấu hình ứng dụng JavaScript của riêng bạn. JavaScript đã biên dịch của bạn thường sẽ được đặt trong thư mục

  

47

{tip} Tệp


  

46 sẽ tải tệp

  

49 khởi động và định cấu hình Vue, Axios, jQuery và tất cả các phụ thuộc JavaScript khác. Nếu bạn có các phụ thuộc JavaScript bổ sung để định cấu hình, bạn có thể làm như vậy trong tệp này

Viết các thành phần Vue

Theo mặc định, các ứng dụng Laravel mới chứa một thành phần Vue


  

50 nằm trong thư mục

  

51. Tệp

  

50 là một ví dụ về một thành phần Vue tệp duy nhất xác định mẫu JavaScript và HTML của nó trong cùng một tệp. Các thành phần tệp đơn cung cấp một cách tiếp cận rất thuận tiện để xây dựng các ứng dụng dựa trên JavaScript. Thành phần ví dụ được đăng ký trong tệp

  

46 của bạn


  

0

Để sử dụng thành phần trong ứng dụng của bạn, bạn có thể thả nó vào một trong các mẫu HTML của mình. Ví dụ: sau khi chạy lệnh


  

54 Artisan để dàn dựng màn hình đăng ký và xác thực ứng dụng của bạn, bạn có thể thả thành phần này vào mẫu

  

55 Blade

{tip} Hãy nhớ rằng, bạn nên chạy lệnh


0 mỗi khi thay đổi thành phần Vue. Hoặc, bạn có thể chạy lệnh

  

57 để theo dõi và tự động biên dịch lại các thành phần của mình mỗi khi chúng được sửa đổi

Nếu bạn quan tâm đến việc tìm hiểu thêm về cách viết các thành phần Vue, bạn nên đọc tài liệu về Vue, tài liệu này cung cấp tổng quan toàn diện, dễ đọc về toàn bộ khung Vue

Sử dụng phản ứng

Nếu bạn thích sử dụng React để xây dựng ứng dụng JavaScript của mình, Laravel giúp bạn dễ dàng hoán đổi khung Vue với khung React. Trên bất kỳ ứng dụng Laravel mới nào, bạn có thể sử dụng lệnh


  

4 với tùy chọn

  

59

Lệnh đơn này sẽ loại bỏ khung Vue và thay thế nó bằng khung React, bao gồm một thành phần ví dụ

Tại sao css của tôi không hoạt động trong PHP?

có thể đó là sự cố bộ đệm , chỉ cần xóa tất cả dữ liệu duyệt web, lịch sử, bộ đệm, cookie, v.v. t. c, sau đó đóng trình duyệt và mở lại, nó sẽ khắc phục sự cố như đã khắc phục sự cố của tôi. Nhưng cách tốt nhất để thực sự khắc phục sự cố này là gọi tệp css bằng php.

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

Laravel Mix cung cấp một API rõ ràng, biểu cảm qua việc biên dịch SASS hoặc Ít hơn , là các phần mở rộng của CSS đơn giản có thêm các biến, mixin và các tính năng mạnh mẽ khác giúp làm việc với CSS nhiều hơn .

Laravel sử dụng khung CSS nào?

Gói Tailwind CSS Laravel từ Tony Messias hoàn thiện phiên bản CLI độc lập của khung CSS Tailwind cho các ứng dụng Laravel.

Tôi có thể liên kết tệp css với tệp PHP không?

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the PHP. Step 2: Now, we have to place the cursor in any tag of the tag where we want to add the code of PHP. And, then we have to type the start and end tag of PHP.