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:
const css = require['./component.css']
- Chúng ta cần có các kiểu đánh máy cho
7 vì nó không phải là tính năng tiêu chuẩn trong TypeScript.declare function require[name: string]: string; Gõ đơn giản nhất cho yêu cầu cụ thể này có thể là:
declare function require[name: string]: string;Webpack sau đó sẽ biên dịch TypeScript và sử dụng các mô -đun đúng cách - nhưng không có bất kỳ trợ giúp IDE nào và tên lớp kiểm tra để xây dựng.BUT without any IDE help and class names checks for build.
B] Có giải pháp tốt hơn để sử dụng nhập khẩu tiêu chuẩn:import:
import * as css from './component.css'
- Cho phép tên lớp học đầy đủ IntelliSenseclass names IntelliSense
- Yêu cầu các loại định nghĩa cho mỗi tệp CSS, nếu không Trình biên dịch
8 sẽ không thành côngdeclare function require[name: string]: string;
Đối với Intellisense thích hợp, WebPack cần tạo định nghĩa loại cho từng tệp CSS:
Sử dụng WebPack Typings-for-CSS-Modules-Loader
webpackConfig.module.loaders: [ { test: /\.css$/, loader: 'typings-for-css-modules?modules' } { test: /\.scss$/, loader: 'typings-for-css-modules?modules&sass' } ];Trình tải sẽ tạo các tệp
9 cho mỗi tệp CSS trong cơ sở mã của bạndeclare function require[name: string]: string;- Trình biên dịch TypeScript sẽ hiểu rằng nhập CSS sẽ là mô -đun với các thuộc tính [tên lớp] của chuỗi loại.
Đã đề cập
import * as css from './component.css'
import * as css from './component.css'
declare function require[name: string]: string;
Kịch bản lỗi nhỏ đó:
- Tạo tệp CSS
3import * as css from './component.css' - Bao gồm nó trong thành phần
4import * as css from './component.css' - Chạy
5import * as css from './component.css' - Trình biên dịch TypeScript sẽ cố gắng biên dịch mã [lỗi]
- Trình tải sẽ tạo tệp đánh máy mô -đun CSS [
6], nhưng đã trễ trình biên dịch TypeScript để tìm tệp đánh máy mớiimport * as css from './component.css' - Chạy lại
5 sẽ sửa lỗi xây dựng.import * as css from './component.css'
Easy Fix là tạo định nghĩa toàn cầu [ví dụ: Tệp được gọi là
import * as css from './component.css'
declare module '*.css' {
interface IClassNames {
[className: string]: string
}
const classNames: IClassNames;
export = classNames;
}
Đị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 +
import * as css from './component.css'
import * as css from './component.css'
Ví dụ về
import * as css from './component.css'
export const wrapper: string;
export const button: string;
export const link: string;
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:
- Thời gian xây dựng nhanh để phát triển
- Giảm thiểu CSS được sáp nhập vào một tệp để sản xuất
- Đã tách CSS thành các tệp được phân tách
- Các lớp CSS bị cô lập cho các thành phần từ CSS phổ biến cho ứng dụng
- Tự động hoàn thành trong mã VS cho các mô -đun CSS
Bước đầu tiên - Nhập tệp CSS trong TypeScript
Mụ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-loaderSau đó, 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 = {
...module: {
rules: [
{
test: /\.css$/i,
use: [
{loader: 'css-loader', options:{url: false}}
]
}
],...
}
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 đó.
declare function require[name: string]: string;
Quan 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.
declare function require[name: string]: string;
Đối với mục đích sản xuất, cần có ảnh chụp nhanh của thiết lập webpack.
declare function require[name: string]: string;
Các mô -đun CSS ở đâu và những gì về sự cô lập
Cho đế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.
declare function require[name: string]: string;
Giả 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.
We need to define typings.d.ts file in root of our project in which we will describe how css module should be threated.
declare function require[name: string]: string;
Bước 2 Chúng tôi cần cài đặt các mô-đun TypeScript-plugin-CSS với NPM.
We need to install typescript-plugin-css-modules with npm.
declare function require[name: string]: string;
Bướ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.
The last step should connect this plugin with typescript language server and provide
us ability to isolate name of css rules. To do so update your tsconfig.json file with the following directive.
declare function require[name: string]: string;
Chú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 //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 //github.com/mrmckeb/typescript-plugin-css-modules#visual-studio-code
Tóm tắt lại
Vớ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:
- Chia các quy tắc CSS thành nhiều tệp và quản lý thứ tự nhập với cú pháp nhập FileName.css.import “filename.css” syntax.
- Chúng tôi đã xây dựng nhanh để phát triển nhưng không hiệu quả nhưng cũng rất hiệu quả để sản xuất
- Nếu chúng ta cần mô-đun CSS nên được cách ly với các quy tắc còn lại của các quy tắc CSS, chúng ta có thể sử dụng chúng như bất kỳ mô-đun nào khác [nhập CSS từ mô-đun tên.module.css] với tự động hoàn thành trong mã VS.import css from “module-name.module.css”] with autocomplete in VS Code.