Module.css không hoạt động
Một trong những điều đầu tiên bạn cần cấu hình trong dự án webpack của mình là CSS. CSS rất cơ bản đối với một ứng dụng web — hầu như tất cả các ứng dụng web đều cần nó. Nhưng việc định cấu hình webpack rất phức tạp. Và nếu bạn muốn các mô-đun CSS và CSS, điều đó có thể còn khó hiểu hơn nữa. Trong bài viết này, tôi sắp xếp tất cả cho bạn Show
Bạn sẽ học được những điều sau đây trong bài đăng này
Hãy bắt đầu cấu hình CSS. Tôi cho rằng bạn đã thiết lập một dự án webpack. Nếu không, hãy xem createapp. nhà phát triển để tạo bản soạn sẵn gói webpack tùy chỉnh của riêng bạn Tạo tệp CSS và tham chiếu nóTrước khi chúng tôi định cấu hình hỗ trợ CSS trong thiết lập webpack, trước tiên hãy thêm tệp CSS và sử dụng nó Điều đầu tiên chúng ta sẽ làm là thêm một tệp 3 vào dự án. Hãy đặt nó vào thư mục 4
Tệp CSS này tạo nền đen và màu chữ trắng. Điều này cho thấy rõ nó có hoạt động hay không - nếu nó hoạt động thì toàn bộ trang sẽ có màu đen Điều tiếp theo cần làm là nhập nó. Chúng ta sẽ thực hiện việc này từ một tệp JavaScript vì theo mặc định, webpack đặt CSS bên trong gói, điều đó có nghĩa là chúng ta phải tham chiếu nó từ một tệp JavaScript khác (chúng ta sẽ xem xét cách trích xuất CSS sang tệp của chính nó sau trong hướng dẫn này) Đặt cái này vào tệp 5 của bạnCấu hình webpack css-loader và style-loaderĐể có thể sử dụng CSS trong ứng dụng webpack của bạn, bạn cần thiết lập một. Gói ngoài hộp, webpack chỉ hiểu Javascript và JSON. Với trình tải, bạn có thể dịch một loại tệp khác sang định dạng mà webpack hiểu và có thể hoạt động với Có nhiều trình tải webpack và mỗi trình tải có một mục đích cụ thể. Bạn cần hai trình tải để hỗ trợ CSS trong ứng dụng của mình. 1 và 0. Hãy xem cách chúng ta có thể cấu hình 1 và 0 trong webpackBạn thiết lập trình tải với từ khóa 10 trong 11 của mìnhĐây là cách bạn định cấu hình CSS trong 11 của mình
Từ khóa 13 cho webpack biết loại tệp nào nên sử dụng trình tải này. Từ khóa 14 cho webpack biết trình tải nào sẽ được chạy cho các tệp nàyNhư bạn có thể thấy trong phần cấu hình, bạn cần sử dụng hai bộ tải, 0 và 1. Bạn cũng cần cài đặt chúng dưới dạng phụ thuộc NPM 1css-loader và style-loader làm gì?Trình tải chỉ là các hàm JavaScript thuần túy. họ lấy một số dữ liệu làm đầu vào và thực hiện điều gì đó với dữ liệu đó và trả về một phiên bản đã chuyển đổi của dữ liệu. Khi bạn sử dụng hai bộ tải trong webpack thì nó sẽ lấy đầu ra của cái đầu tiên và gửi nó làm đầu vào cho cái thứ hai. Trong ví dụ của chúng tôi, nó lấy tệp CSS và chạy nó qua 1, sau đó nó lấy đầu ra và chạy nó làm đầu vào cho 0Hãy xem những gì bộ nạp làm 1 đọc CSS từ tệp CSS và trả về CSS với 30 và 31 được giải quyết chính xác. Điều đó nghĩa là gì? . Giả sử bạn có một 32 trong CSS tham chiếu đến một tài nguyên khác, chẳng hạn như một hình ảnh 3Trong ví dụ này, chúng tôi tham khảo 33 từ CSS. Khi 1 nhìn thấy dòng này, nó sẽ báo cho webpack tải tệp này bằng trình tải thích hợp. Để điều này hoạt động, bạn cũng cần định cấu hình trình tải SVG, vì tệp là tệp SVGĐể tải các tệp SVG, chúng tôi sử dụng trình tải tệp webpack Nếu bạn chưa định cấu hình 1, bạn sẽ gặp lỗi khó hiểu như thế này 0Bạn sẽ gặp lỗi này mặc dù bạn đã định cấu hình trình tải cho các tệp SVG. Tránh các lỗi kỳ lạ như thế bằng cách luôn sử dụng 1 cho cấu hình CSS của bạnTrình tải tiếp theo bạn đã định cấu hình là 0. Trình tải này thêm CSS vào DOM để các kiểu hoạt động và hiển thị trên trang. Điều này là cần thiết vì CSS được đưa vào tệp 38 - không có tệp 3 riêng biệtCó thể xuất một tệp 3 riêng biệt bằng cách sử dụng mini-css-extract-plugin thay vì sử dụng 0 như chúng tôi đã làm trước đâyĐiều đầu tiên bạn cần làm là cài đặt phụ thuộc 7Sau đó, bạn cần nhập plugin ở đầu 11 9Điều tiếp theo là kích hoạt plugin trong phần plugin của tệp 11 của bạn 1Và cuối cùng nhưng không kém phần quan trọng, bạn thay thế 0 bằng 05Bây giờ khi bạn chạy webpack, nó sẽ xuất ra tệp 06 trong thư mục dist mà bạn có thể tham khảo từ tệp 07 của mình. (xóa dòng 08 khỏi 5 nếu bạn đã thêm dòng đó)Bây giờ bạn đã biết cách định cấu hình CSS thuần túy, hãy xem cách định cấu hình các mô-đun CSS trong webpack Nhưng trước tiên, các mô-đun CSS là gì? "Mô-đun CSS là một tệp CSS trong đó tất cả các tên lớp và tên hoạt hình được đặt trong phạm vi cục bộ theo mặc định. " CSS là toàn cầu - các lớp bạn xác định có thể được sử dụng ở mọi nơi. Nhưng các mô-đun CSS được đặt trong phạm vi thành phần mà chúng được sử dụng thủ thuật CSS. com có một bài giới thiệu khá hay về Mô-đun CSS rất hữu ích nếu bạn muốn tìm hiểu thêm. Trong bài đăng này, chúng tôi sẽ tập trung vào việc tìm hiểu cách định cấu hình nó Định cấu hình các mô-đun CSS khá giống với định cấu hình CSS 8bạn vẫn sử dụng 1 và 0. Không phụ thuộc thêm là cần thiết. Nhưng sự khác biệt để định cấu hình CSS là bạn thêm hai tùy chọn vào 1Đó là 73 yêu cầu 1 kích hoạt các mô-đun CSS 75 có nghĩa là nó cũng áp dụng các mô-đun CSS trên các tài nguyên 76edSử dụng đồng thời cả Mô-đun CSS và CSS toàn cầuVì vậy, cách để kích hoạt các mô-đun CSS là chuyển một số tùy chọn cho 1. Nhưng nếu chúng ta muốn sử dụng cả mô-đun CSS và CSS thì sao?. Giả sử bạn có tệp ________ 378 thực sự là CSS toàn cầu. Hoặc bạn sử dụng thành phần của bên thứ ba phụ thuộc vào CSS toàn cầu. Nó có thể làm đượcChúng tôi cần một quy ước để sử dụng để quyết định tệp nào là CSS toàn cầu và tệp nào là mô-đun CSS. Cách tôi muốn làm là chỉ sử dụng các mô-đun CSS cho các tệp kết thúc bằng 79, ví dụ như 90 và tất cả các tệp 91 khác là toàn cầuĐể định cấu hình, chúng tôi sẽ thêm hai trình tải vào cấu hình webpack của chúng tôi. một cho CSS và một cho các mô-đun CSS và chúng tôi sẽ sử dụng các từ khóa 92 và 93 để tách hai. ________ 392 và _______ 393 nhận một biểu thức chính quy quyết định xem tệp có nên được sử dụng hay không. Thiết lập hoàn chỉnh trông như thế này 5Bây giờ bạn có thể sử dụng cả CSS và mô-đun CSS trong dự án của mình Theo dõi tôi trên Twitter để nhận thông tin cập nhật theo thời gian thực về các mẹo, thông tin chi tiết và những thứ tôi xây dựng trong hệ sinh thái giao diện người dùng Làm cách nào để sử dụng CSS mô-đun trong React js?Sử dụng mô-đun CSS . Tạo một tệp với. mô-đun. css làm phần mở rộng Nhập mô-đun đó vào ứng dụng React (như chúng ta đã thấy trước đó) Thêm một tên lớp vào một phần tử hoặc thành phần và tham chiếu kiểu cụ thể từ các kiểu đã nhập Tại sao CSS không hoạt động trong React?Lỗi này được tạo ra bởi vì trình biên dịch chỉ có thể nhập tệp từ thư mục src . Ở đây file CSS được lưu ngoài thư mục src nên trình biên dịch không import được. Để mã này hoạt động, bạn chỉ cần lưu tệp CSS bên trong thư mục src.
Tại sao nên sử dụng CSS mô-đun trong React?Nó làm giảm phạm vi toàn cầu của phong cách React. Ngoài ra, nó là một công cụ ngăn chặn phạm vi toàn cầu và xung đột bằng cách tạo một chuỗi ngẫu nhiên dưới dạng tên className và thêm một hàm băm duy nhất để làm cho mỗi className trở nên độc nhất. Chúng ta có thể ngăn xung đột không gian tên cho các lớp CSS bằng cách sử dụng Mô-đun CSS
CSS mô-đun là gì?Mô-đun CSS là tệp CSS trong đó tất cả tên lớp và tên hoạt ảnh được đặt trong phạm vi cục bộ theo mặc định . Mô-đun CSS cho phép bạn viết kiểu trong tệp CSS nhưng sử dụng chúng dưới dạng đối tượng JavaScript để xử lý bổ sung và đảm bảo an toàn. |