23
Thực tiễn hiện nay cho CSS với Phản ứng linh kiện dường như được sử dụng phong cách-loader webpack để tải nó vào trang trong.Phản ứng Server side rendering của module CSS
import React, { Component } from 'react';
import style from './style.css';
class MyComponent extends Component {
render(){
return (
<div className={style.demo}>Hello world!</div>
);
}
}
Bằng cách này phong cách-loader sẽ bơm một phần tử <style> vào DOM. Tuy nhiên, <style> sẽ không nằm trong DOM ảo và do đó nếu thực hiện hiển thị bên máy chủ, <style> sẽ bị bỏ qua. Điều này khiến trang có FOUC.
Có phương pháp nào khác để tải CSS modules hoạt động trên cả máy chủ và phía máy khách không?
Bạn có thể thử plugin postcs này: https://github.com/ctxhou/postcss-hash-classname. Tôi tìm thấy trình nạp kiểu chỉ giới hạn đối với webpack, vì vậy với plugin này, bạn có thể trích xuất tên lớp css dưới dạng tệp đối tượng js. Sau đó, bạn có thể yêu cầu 'style.js' này và sử dụng cùng một mã. Bởi vì đây là tệp '.js', tất nhiên nó có thể hỗ trợ hiển thị phía máy chủ. Bạn có thể kiểm tra repo để biết thêm chi tiết:) –
Vấn đề tôi đang tìm cách giải quyết là làm cho webpack đưa CSS vào DOM ảo để hiển thị bên máy chủ cũng có CSS được đóng gói. Tôi không nghĩ rằng một trong những có bất cứ điều gì liên quan đến nhiệm vụ này? – willwill
Bạn có nghĩa là bạn không muốn tạo một tệp css khác và chỉ muốn webpack giúp bạn tiêm nó? –