解決 Universal 架構的 CSS Modules 問題
最近在使用 React 和 Redux 建構一個 Isomorphic JavaScript(Universal)應用。
但是在實作 CSS Modules 的時候,會碰上兩個問題:
Server-side 的 Node.js 無法 import
*.css
。如果改成使用
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
保持一致。
台灣原生種程序猿
台灣原生種程序猿,曾經是遊戲圈的碼農,目前是前端攻城狮。
推荐阅读
如何正確處理 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年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...
i5ting赞 14阅读 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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。