在前端开发中，JavaScript 不可避免地要和 CSS 共存。但是在同构（服务器端渲染和客户端渲染混合）应用中，CSS 的管理可能变得有点复杂。在这种情况下，使用 isomorphic-css npm 包就是一个不错的选择。
什么是 isomorphic-css
isomorphic-css 是一个 npm 包，它允许你在同时支持服务器端渲染和客户端渲染的 React 应用中，通过将 CSS 处理成为字符串，实现了服务器端 CSS 渲染的方式。这意味着你的 CSS 将在页面首次加载时就被服务器渲染，然后在客户端路由变化时被客户端渲染。这降低了加载时间并提供了更好的性能。
如何使用 isomorphic-css
- 安装
你可以通过 npm 安装 isomorphic-css：
npm install isomorphic-css
- 编写样式
要使用 isomorphic-css，需要写一个包含样式的文件。这个文件可以是 CSS、LESS 或 SCSS。例如，我们将以 CSS 文件为例：
.someClass {
background-color: red;
}- 创建一些样式
接下来，你需要创建一个样式对象。这个对象应该包含你刚刚写的样式，且每个选择器都应该转换为一个标识符。例如，.someClass 应该转换为：
someClass: 'someClass_abcdefg'
abcdefg 是随机生成的哈希。
const styles = {
someClass: 'someClass_abcdefg',
};
export default styles;记得将 CSS 文件与样式对象联系起来。
- 使用 style-loader 和 css-loader
你还需要使用 style-loader 和 css-loader。turnOff 选项是必须的，这样 style-loader 不会将样式注入到 head 中，而是返回样式字符串。
-- -------------------- ---- ------- ------ - ------- - ---- ----------------- ------ ------ ---- --------------- -- ------- ------ --- ------------ - ------------------------ - ----- --- - ---------- -- ----------------------------------- -- ------ ----- ------------
这段代码的含义是对于服务端请求，使用 require(../../build/styles.css) 获取相应的样式。对于浏览器请求，该库会借助 style-loader 和 css-loader 自动插入脚本，然后将样式注入到应用程序中的 head 中。
- 给组件添加样式
你需要通过按照特定格式编写自定义渲染函数（render function）来添加样式。例如，要应用上面定义的样式进行渲染，你可以这样做：
-- -------------------- ---- -------
------ ------ ---- ------------
----- ----------- ------- --------------- -
-------- -
------ -
---- ---------------------------------- ------------
--
-
-
------ ------- ------------在这个例子中，我们引入上面创建的样式模块并将其应用到 div 元素的 className 属性上。
- 编译应用程序
最后，编译你的应用程序并在浏览器中查看它。
结束语
isomorphic-css 是一个很好的库，它在服务器端和浏览器端都为你渲染样式，使得你的应用程序加载更快。此外，在这种同构（服务器端渲染和客户端渲染混合）应用程序中，它还提供了一些额外的便利。在 React 中，isomorphic-css 非常流行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005548f81e8991b448d1d31