Hướng dẫn tsx import css - tsx nhập css
13 tháng 7 năm 2021 Trong video này, tôi sẽ chỉ cho bạn cách làm cho ứng dụng phản ứng của bạn đáng tin cậy hơn. Các thành phần và tên lớp của bạn sẽ luôn nhất quán. Và lần sau, khi bạn xóa tên lớp để nó không còn tồn tại, bạn sẽ gặp lỗi biên dịch. Các lệnh đã sử dụng:
Đầu tiên, hãy để tạo ra một ứng dụng React với các thành phần TypeScript. Đối với điều này, trong dòng lệnh, chúng ta cần thực thi: Tiếp theo, chúng tôi đi đến thư mục ứng dụng và thực thi Bây giờ, nếu chúng ta mở thành phần Nhưng nếu chúng ta thay đổi tên của lớp này hoặc xóa nó. Hãy cùng làm điều đó và lưu tệp CSS. Trong trường hợp này, ứng dụng vẫn đang chạy và chúng tôi không nhận được bất kỳ lỗi hoặc cảnh báo nào theo mặc định. Điều này có nghĩa là đôi khi chúng tôi thậm chí có thể không nhận thấy sự không nhất quán như vậy trong ứng dụng của chúng tôi. Điều này thậm chí còn gây khó chịu hơn khi chúng tôi không nhận được bất kỳ lợi ích nào từ việc sử dụng hệ thống loại TypeScript. Vì vậy, hãy để tôi chỉ cho bạn cách cải thiện tình huống này (và bây giờ tôi muốn trả lại tên lớp bị loại bỏ). Được. Trước hết, chúng tôi cần cài đặt gói Tiếp theo, chúng ta cần đưa trình tải kiểu này vào đường ống của chúng tôi. Đối với điều này, tôi sẽ cập nhật tệp cấu hình webpack. Hãy cùng giai đoạn thay đổi của chúng tôi bằng cách thực hiện lệnh Bây giờ, chúng tôi có thể chạy lệnh Trong
Chúng tôi đã xác định danh sách các trình tải kiểu riêng mà chúng tôi muốn áp dụng cho các tệp CSS trong dự án của chúng tôi. Và Hãy để lưu nó và xây dựng ứng dụng với lệnh Khi bản dựng hoàn tất, bạn có thể nhận thấy tệp Hãy để mở tệp Bây giờ, chúng tôi có thể tham khảo tên lớp của chúng tôi bằng cách sử dụng đối tượng lớp. Ví dụ, chúng tôi thay đổi:
Nếu chúng tôi bắt đầu ứng dụng, chúng tôi sẽ thấy rằng nó hoạt động như trước. Nhưng nếu chúng ta thay đổi một tên lớp hoặc xóa nó. Hãy để lưu tệp. Và kể từ bây giờ, trong trường hợp có bất kỳ sự không nhất quán nào với các kiểu của chúng tôi, chúng tôi sẽ nhận được thông báo lỗi trong VSCODE và cũng là lỗi biên dịch trong ứng dụng. Theo tôi, cách tiếp cận này là vô cùng hữu ích và hoàn toàn bắt buộc đối với bất kỳ ứng dụng phản ứng lớn nào. Và đó là tất cả cho ngày hôm nay. Tôi hy vọng phương pháp này sẽ làm cho các ứng dụng phản ứng của bạn vững chắc hơn và giúp bạn tiết kiệm rất nhiều thời gian. Liên kết đến mã nguồn nằm trong mô tả của video này. Và tôi hy vọng sẽ gặp bạn lần sau. References:
Theo dõi tôi trực tuyếnTham gia Discord: https://discord.gg/v4ymgpqzrb
|