Thêm lớp CSS trong TypeScript

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 để hoạt động như tôi muốn. Có rất nhiều bài viết bạn có thể đọc về chủ đề này nhưng hầu hết chúng tôi không quản lý để làm việc. Tôi tránh React những ngày này do cần phải thay đổi tư duy để chấp nhận mẫu Flux và tất cả các phần khác được yêu cầu như Redux nhưng tôi sẽ không giải thích thêm về điều đó

Ảnh của Ferenc Almasi trên Bapt

Mục tiêu của tôi là thiết lập các Mô-đun CSS trong dự án Bản mô tả được xây dựng bằng Webpack trong khi đạt được các mục tiêu sau

• Thời gian xây dựng nhanh để phát triển
• Css thu nhỏ được hợp nhất thành một tệp để sản xuất
• CSS tách rời thành các tệp riêng biệt
• Các lớp CSS riêng biệt 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 Bản in

Mục tiêu đầu tiên cần đạt được là khả năng nhập 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 css-loader cho như vậy

Vì vậy, bạn cần cài đặt nó trước bằng 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 mình trong phần mô-đun -> quy tắc cách tệp CSS sẽ được tải

module.exports = {
...module: {
rules: [
{
test: /\.css$/i,
use: [
{loader: 'css-loader', options:{url: false}}
]
}
],...
}

Với thiết lập này, webpack 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 theo cú pháp

import "filename.css"

Bản dựng Weblack sẽ hoạt động nhưng vấn đề là nội dung này ngoại trừ được lưu trữ trong tệp JS đã biên dịch, không thể được sử dụng cho bất kỳ mục đích gì

If you want to embed content of all css files in host page within 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.

Trước tiên, bạn cần cài đặt các plugin webpack đó

npm install --save-dev style-loader MiniCssExtractPlugin CssMinimizerPlugin

Quan trọng. Việc thực hiện các bộ tải theo thứ tự ngược lại

Vì vậy, đối với kịch bản đầu tiên (xâu chuỗi css-loader -> style-loader), thiết lập sau cho webpack là cần thiết

module.exports = {
...module: {
rules: [
{
test: /\.css$/i,
use: [
{loader: "style-loader"},
{loader: 'css-loader', options:{url: false}}
]
}
],...
}

Đối với mục đích sản xuất, cần có ảnh chụp nhanh sau đây về thiết lập webpack

module.exports = {
... mode: 'production',
module: { ...
rules: [
test: /\.css$/i,
use: [
{loader: MiniCssExtractPlugin.loader, options:{}},
{loader: 'css-loader', options:{url: false}}
]}
],
},optimization:{
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin()
]
},plugins:[
new MiniCssExtractPlugin({filename: `app.css`,}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
inject: true,
filename: "index.html",
template: "src/static/index.template.html",
minify: false
}),
...
]
};Các mô-đun CSS ở đâu và cách ly thì sao

Cho đến nay, chúng tôi cho phép tách 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 hơn nhưng hiệu quả cho sản xuất. Nhưng bên cạnh đó, một trong những mục tiêu quan trọng là cách ly các mô-đun css (thành phần)

Hãy tưởng tượng mã dưới đây để làm việc

import css from "./static/style.module.css";window.onload = () => {
let divApp = document.getElementById("app");
divApp.classList.add(css.blueBox);
divApp.innerHTML = /*html*/`<div>class="${css.redLabel}">LOADED</div>`;
}

Giả sử rằng các tập tin. /tĩnh/kiểu. mô-đun. css đã định nghĩa các lớp css. blueBox và. redLabel mã này sẽ không hoạt động vì TypeScript không biết cách làm việc với loại mô-đun css. Để làm cho nó hoạt động, bạn có thể thay thế css. blueBox với “blueBox” và “${css. Nhãn đỏ}” với “Nhãn đỏ”. 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

Đầ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, cần thực hiện một vài bước

Bước 1
Chúng ta cần xác định kiểu chữ. d. ts trong thư mục gốc của dự án của chúng tôi, trong đó chúng tôi sẽ mô tả cách mô-đun css bị đe dọa

________số 8_______

Bước 2
Chúng ta cần cài đặt TypeScript-plugin-css-modules với npm

npm install --save-dev typescript-plugin-css-modules

Bước 3
Bước cuối cùng sẽ kết nối plugin này với máy chủ ngôn ngữ bản thảo và cung cấp cho chúng tôi khả năng cách ly tên của quy tắc css. Để làm như vậy, hãy cập nhật tsconfig của bạn. json bằng lệnh sau

npm install --save-dev css-loader0

Chúng ta đã nhận được gì?

Đầu tiên, css của các mô-đun của chúng tôi bị cô lập

blueBox được thay thế bằng f3GRW8HGZoJpx1lbL2Y9 và redLabel được thay thế bằng YmKJSBG2rQjyw5jmYixv

Đối với mục đích gỡ lỗi, bạn nên đặt bản đồ nguồn để bạn có thể tham chiếu nguồn cho các quy tắc css

Thứ hai, tính năng tự động hoàn tất cho các mô-đun css trong Mã VS hoạt động như một nét duyên dáng

Mã VS Tự động điền cho Mô-đun CSS

Ghi chú. Để làm cho các mô-đun TypeScript-plugin-css hoạt động, bạn nên đặt VSC sử dụng phiên bản Workspace của Type Script như được mô tả trong hướng dẫn sử dụng plugin

Làm cách nào để tạo lớp CSS trong TypeScript?

Làm cách nào để thêm lớp CSS trong Angular?

Làm cách nào để thêm lớp trong CSS?

Làm cách nào để thay đổi lớp CSS trong TypeScript Angular?