Hướng dẫn typescript import css - css nhập bảng chữ
A) Như bạn đang nói, có một tùy chọn đơn giản nhất (không tốt nhất) để sử dụng yêu cầu:require: Show
B) Có giải pháp tốt hơn để sử dụng nhập khẩu tiêu chuẩn:import:
Đối với Intellisense thích hợp, WebPack cần tạo định nghĩa loại cho từng tệp CSS:
Đã đề cập 0 chứa một lỗi và vì loại trì hoãn tạo tệp, tốt nhất là khai báo loại 1 toàn cầu trong trường hợp tệp 9 của chúng tôi chưa được tạo.Kịch bản lỗi nhỏ đó:
Easy Fix là tạo định nghĩa toàn cầu (ví dụ: Tệp được gọi là 8 trong root nguồn của bạn) để nhập các mô -đun CSS:
Định nghĩa này sẽ được sử dụng nếu không có tệp CSS được tạo (ví dụ: bạn đã thêm tệp CSS mới). Nếu không, sẽ được sử dụng cụ thể được tạo (cần phải có trong cùng một thư mục và được đặt tên giống như tệp nguồn + 9), ví dụ. 6 Định nghĩa và Intellisense sẽ hoạt động hoàn hảo.Ví dụ về 6:
Và nếu bạn không muốn xem các bản đánh máy CSS được tạo, bạn có thể thiết lập bộ lọc trong IDE để ẩn tất cả các tệp với phần mở rộng .css.d.ts trong các nguồn của bạn. Thành thật mà nói, tôi không mong đợi bất kỳ vấn đề nào với chủ đề này nhưng tôi phải nói rằng tôi đã dành một ngày để tìm cách thiết lập các mô -đun CSS trong dự án TypeScript để hành động như tôi muốn. Có nhiều bài viết bạn có thể đọc cho chủ đề này nhưng hầu hết trong số chúng tôi không quản lý để làm việc. Tôi tránh phản ứng những ngày này do sự thay đổi tâm trí cần thiết để chấp nhận mô hình thông lượng và tất cả các phần khác được yêu cầu như Redux nhưng tôi sẽ không nói thêm về điều đó. Ảnh của Ferenc Almasi trên unplashMục tiêu của tôi là thiết lập các mô -đun CSS trong dự án TypeScript được xây dựng với WebPack trong khi đạt được các mục tiêu sau:
Bước đầu tiên - Nhập tệp CSS trong TypeScriptMục tiêu đầu tiên cần đạt được là khả năng nhập các tệp CSS trong dự án. import "./src/static/style.css"; Để làm như vậy, cấu hình webpack của bạn phải có trình tải cho các tệp CSS. Tôi đã sử dụng bộ tải CSS cho như vậy.css-loader for such. Vì vậy, bạn cần cài đặt nó trước với lệnh. npm install --save-dev css-loader Sau đó, bạn cần chỉ định trong tệp cấu hình webpack của bạn trong mô -đun phần -> Quy tắc cách các tệp CSS sẽ được tải.module -> rules how CSS files will be loaded. module.exports = { Với thiết lập này, trang web của bạn sẽ tải nội dung của tất cả các tệp CSS theo thứ tự do đó được nhập bằng cú pháp: import "filename.css" Build WebLack sẽ hoạt động nhưng rắc rối là nội dung này ngoại trừ được lưu trữ trong tệp JS được biên dịch không thể được sử dụng cho bất cứ điều gì. Nếu bạn muốn nhúng nội dung của tất cả các tệp CSS vào trang máy chủ trong thẻ, bạn nên chuỗi trình tải kiểu. Tùy chọn này được khuyến nghị cho mục đích phát triển vì nó là lựa chọn nhanh nhất. Đối với mục đích sản xuất, bạn nên hợp nhất tất cả các tệp CSS, giảm thiểu và tạo một tệp nên được tải trong trang máy chủ. Đối với kịch bản như vậy, bạn có thể chuỗi minicssextractplugin xuất ra một tệp và cssminimizerplugin để giảm thiểu. tag you should chain style-loader. This option is recommended for development purpose because it is the fastest one. For production purpose you should merge all css files, minimize and create one file that should be loaded in host page. For such scenario you can chain MiniCssExtractPlugin to output one file and CssMinimizerPlugin for minimization. Đầu tiên bạn cần cài đặt các plugin webpack đó. 0Quan trọng: Thực hiện các trình tải theo thứ tự ngược lại.Execution of loaders is in reverse order. Vì vậy, đối với kịch bản đầu tiên (Chuỗi CSS-Loader-> Style-Loader), cần thiết lập, thiết lập sau cho trang web.css-loader -> style-loader) the following setup for webpack is needed. 1Đối với mục đích sản xuất, cần có ảnh chụp nhanh của thiết lập webpack. 2Các mô -đun CSS ở đâu và những gì về sự cô lậpCho đến nay, chúng tôi cho phép chia CSS thành nhiều tệp và hợp nhất nó với WebPack với hai tùy chọn: một nhanh để phát triển và một chậm nhưng hiệu quả để sản xuất. Nhưng ngoài một trong những mục tiêu quan trọng là có sự cô lập cho các mô -đun CSS (các thành phần). Hãy tưởng tượng mã dưới đây để làm việc. 3Giả sử rằng các tệp. Để làm cho nó hoạt động, bạn có thể thay thế CSS.Bluebox bằng cách BlueBox, và $ {CSS.REDLABEL}, với Red RedLabel. Bằng cách đó, bạn sẽ có thể xây dựng dự án nhưng tên lớp của các tệp đó sẽ không bị cô lập../static/style.module.css has defined css classes .blueBox and .redLabel this code will not work because TypeScript does not know how to work with css type of modules. To make it work you can replace css.blueBox with “blueBox” and “${css.redLabel}” with “redLabel”. By doing so you will be able to build project but class names of those files will not be isolated. Đầu ra sẽ như sau: Để thay thế Bluebox và RedLabel bằng một số hàm băm sẽ cô lập mô -đun của chúng tôi và cho phép chúng tôi chạy mã trên một vài bước là cần thiết.blueBox and redLabel with some hash that will isolate our module and allow us to run the code above the few steps are needed. Bước 1 Chúng tôi cần xác định tệp Typings.D.TS trong root của dự án của chúng tôi, trong đó chúng tôi sẽ mô tả cách mô -đun CSS nên bị đe dọa. 4Bước 2 Chúng tôi cần cài đặt các mô-đun TypeScript-plugin-CSS với NPM. 5Bước 3 Bước cuối cùng nên kết nối plugin này với máy chủ ngôn ngữ TypeScript và cung cấp cho chúng tôi khả năng cô lập tên của các quy tắc CSS. Để làm như vậy, hãy cập nhật tệp tsconfig.json của bạn với chỉ thị sau. 6Chúng ta đã nhận được gì?Đầu tiên, CSS của các mô -đun của chúng tôi được phân lập. the css of our modules are isolated. Bluebox được thay thế bằng F3GRW8HGZOJPX1LBL2Y9 và RedLabel được thay thế bằng YMKJSBG2RQJYW5JMYIXVis replaced with f3GRW8HGZoJpx1lbL2Y9 and redLabel is replaced with YmKJSBG2rQjyw5jmYixvĐối với mục đích gỡ lỗi, bạn nên đặt bản đồ nguồn để bạn có thể có tham chiếu nguồn cho các quy tắc CSS. Thứ hai, AutoComplete cho các mô -đun CSS trong mã VS hoạt động như một sự quyến rũ. autocomplete for css modules in VS Code works like a charm. Vs Code AutoComplete cho mô -đun CSSLưu ý: Để tạo bản thảo-plugin-CSS-modules hoạt động, bạn nên đặt VSC để sử dụng phiên bản không gian làm việc của tập lệnh loại như được mô tả trong plugin thủ công https://github.com/mrmckeb/typescript-plugin-css-modules#visual-studio- mã số To make typescript-plugin-css-modules working you should set VSC to use Workspace version of Type Script as described in plugin manual https://github.com/mrmckeb/typescript-plugin-css-modules#visual-studio-code Tóm tắt lạiVới thiết lập này, chúng tôi có thể làm việc sau với CSS trong dự án TypeScript của chúng tôi:
|