然后安装依赖并开发 $ cd my-project $ yarn install $ yarn dev 坑 第一个坑 Window is not defined 这个我搜文档搜了挺久 修复方法: 使用 isomorphic-style-loader $ npm install isomorphic-style-loader --save
因此需要安装专门做同构应用的style-loader:isomorphic-style-loader(https://github.com/kriasoft/isomorphic-style-loader ) npm i isomorphic-style-loader -S 对server端webpack做单独配置: { test: /\.css$/, use: [ 'isomorphic-style-loader
] }webpack.server.js module:{ rules:[ { test:/\.css$/i, use:[ 'isomorphic-style-loader modules: true } }, ] } ] }细心的你肯定会发现, server 端的配置使用了 isomorphic-style-loader isomorphic-style-loader vs style-loaderstyle-loader 它的作用是把生成出来的 css 样式动态插入到 HTML 中,然而在服务端渲染是没有办法使用 DOM isomorphic-style-loader 主要是导出了3个函数, _getCss 、 _insertCss 与_getContent ,供使用者调用,而不再是简单粗暴的插入 DOM 中。
css-loader可以配置模块化的样式,在webpack中配置rules: // webpack.server.js { test: /\.css$/, use: [ 'isomorphic-style-loader
大致实现思路是用 isomorphic-style-loader 和 universal-router 来处理样式和路由的同构,服务端获取到数据后输出到 window.
二、服务端CSS的引入 首先,来安装一个webpack的插件, npm install -D isomorphic-style-loader 然后再webpack.server.js中做好相应的css $/, use: ['isomorphic-style-loader', { loader: 'css-loader', options: { /style.css'; 引入css文件时,这个isomorphic-style-loader帮我们在styles中挂了三个函数。输出styles看看: ?
查找了很多资料,处理服务端渲染样式用的比较多的是 isomorphic-style-loader 这个库。