解決 Universal 架構的 CSS Modules 問題

最近在使用 ReactRedux 建構一個 Isomorphic JavaScript(Universal)應用。

但是在實作 CSS Modules 的時候,會碰上兩個問題:

  1. Server-side 的 Node.js 無法 import *.css

  2. 如果改成使用 process.env.IS_BROWSER 來判斷只在 Client-dide import,那又會碰到 Server-side 與 Client-side render 出來的 DOM 結果不一致的問題。

解決方式:

安裝 css-modules-require-hook 這個套件:

npm install css-modules-require-hook --save-dev

修改 webpack config 的 css-loader 設定:

// webpack.config.js
{
  // ...
  module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style-loader!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]!!postcss-loader'
    }]
  }
  // ...
}

在 Node.js 的 main file 加入 css-modules-require-hook:

// server.js
require('css-modules-require-hook')({
  generateScopedName: '[name]__[local]___[hash:base64:5]'
});
// ...

注意 generateScopedName 的命名格式,必須與 css-loader 的 localIdentName 保持一致。


台灣原生種程序猿
台灣原生種程序猿,曾經是遊戲圈的碼農,目前是前端攻城狮。

台湾原生种程序猿。

367 声望
15 粉丝
0 条评论
推荐阅读
如何正確處理 AWS API Gateway 的 Lambda Error Status
翻譯自原文 Error handling in AWS API Gateway with Lambda 這篇文章會介紹如何設置 AWS API Gateway 正確處理 Lambda 返回的 HTTP 錯誤狀態碼。 本文假設讀者已經知道如何利用 AWS API Gateway 和 Lambda 建立 ...

Amo阅读 3.4k

给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.6k

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting14阅读 652评论 3

封面图
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.7k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图
大前端必备书籍
为了方便前端开发者系统学习前端知识,搜集了前端系列电子书,帮助开发者系统梳理知识体系,深入理解前端技术。更多书单请关注Github[链接] 。CSS权威指南(第四版)上册百度云CSS权威指南(第四版)下册百度云CSS揭...

码出世界13阅读 1.4k

【WebRTC 跨端通信】React + React Native 双端视频聊天、屏幕共享
之前介绍过 WebRTC,简单来说它是一个点对点的实时通讯技术,主要基于浏览器来实现音视频通信。这项技术目前已经被广泛应用于实时视频通话,多人会议等场景。

杨成功13阅读 1.7k评论 1

封面图

台湾原生种程序猿。

367 声望
15 粉丝
宣传栏