React在同构时组件中有css，请问有好的方案解决吗？

**durongzhang** · May 18, 2016, 7:06am

koa+webpack+react，搭建服务，共用组件代码，但如果组件中有css同构会报错，现在是把css放在webpack出口文件中，但有好的方案，或者在同构是如何忽略css

**OshotOkill** · May 18, 2016, 5:56am

同构在服务端不能忽略CSS，否则就不是同构。

出错的原因主要在webpack是给客户端设计的，在遇到require语法时候会做一些魔法来打包，而服务端中node只懂得用require来引用js，至于样式文件，字体，图片什么的一概不知。

可以在webpack设置属性 target: node，不过我个人的解决办法是用 webpack-isomorphic-tools这个包，文档里也有另一种使用 react-isomorphic-render包的办法

**durongzhang** · May 18, 2016, 6:59am

非常感谢你的回答，通过你的提示找到了一个isomorphic-style-loader ，这个包能暂时解决我的问题

**wssgcg1213** · May 25, 2016, 5:10am

github.com

wssgcg1213/koa2-react-isomorphic-boilerplate/blob/master/bin/development.js#L4


#!/usr/bin/env node
process.env.NODE_ENV = 'development'
console.log('Waiting for webpacking ...')
require('babel-polyfill')
require('babel-core/register')({
  plugins: [
    ['babel-plugin-transform-require-ignore', {
      extensions: ['.less', '.css']
    }],
    ['inline-replace-variables', {
      __SERVER__: true
    }]
  ]
})

开发的时候我用的这个结合webpack-dev-middleware来的

打包分发的时候用extract-text-plugin打成单独的css文件

**durongzhang** · May 26, 2016, 1:40am

这种写法感觉会混淆开发和生产环境，毕竟webpack只在纯前端时使用