Reactjs React样式不适用于Web包开发服务器。未提取样式。获得'；不变冲突：_registerComponent（…）：目标_Reactjs_Webpack_Webpack Dev Server

Reactjs React样式不适用于Web包开发服务器。未提取样式。获得'；不变冲突：_registerComponent（…）：目标

reactjs webpack

Reactjs React样式不适用于Web包开发服务器。未提取样式。获得'；不变冲突：_registerComponent（…）：目标,reactjs,webpack,webpack-dev-server,Reactjs,Webpack,Webpack Dev Server,如果我运行webpack dev server，然后转到localhost:8080，我的应用程序将加载样式。但是，CSS样式显示在各个div的“style”属性上，而不是在标题中，我认为这就是“react style”的要点生成的HTML： <html><head> <style type="text/css"></style></head> <body style="zoom: 1;"> <div

如果我运行webpack dev server，然后转到localhost:8080，我的应用程序将加载样式。但是，CSS样式显示在各个div的“style”属性上，而不是在标题中，我认为这就是“react style”的要点

生成的HTML：

<html><head>
  <style type="text/css"></style></head>
  <body style="zoom: 1;">
    <div id="app"><div data-reactid=".0"><div style="height:200px;width:200px;border:1px solid black;" data-reactid=".0.0"><div data-reactid=".0.0.0"></div><div style="text-align:center;font-size:10px;" data-reactid=".0.0.1">new</div></div></div></div>
    <script src="bundle.js"></script>

</body></html>

这是我的index.html：

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

webpack.config.js：

'use strict';

module.exports = {
  entry: './modules/main.js',
  output: {
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'jsx-loader?harmony'
      },
      { 
        test: /\.less$/, 
        loader: 'style-loader!css-loader!less-loader' 
      },
      { 
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      { 
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=8192'
      } // inline base64 URLs for <=8k images, direct URLs for the rest
    ]
  }
};

“严格使用”；
module.exports={
条目：'./modules/main.js'，
输出：{
文件名：“bundle.js”，
},
模块：{
装载机：[
{
测试：/\.js$/,，
加载器：“jsx加载器？和谐”
},
{ 
测试：/\.减去$/,，
加载器：“样式加载器！css加载器！更少加载器”
},
{ 
测试：/\.css$/,，
加载器：“样式加载器！css加载器”
},
{ 
测试：/\（png | jpg）$/，
加载器：“url加载器？限制=8192”
}//用于的内联base64 URL您应该通过样式属性绑定样式，而不是样式
'use strict';

module.exports = {
  entry: './modules/main.js',
  output: {
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'jsx-loader?harmony'
      },
      { 
        test: /\.less$/, 
        loader: 'style-loader!css-loader!less-loader' 
      },
      { 
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      { 
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=8192'
      } // inline base64 URLs for <=8k images, direct URLs for the rest
    ]
  }
};

/** @jsx React.DOM */

var React = require('react');
var HoverAction = require('./HoverAction/HoverAction');

var Application = React.createClass({
  render: function() {
    return (
      <div>
        <HoverAction title="new"/>
      </div>
    );
  }
});


if (typeof window !== 'undefined') {
  React.render(<Application />, document.getElementById('app'));
}

/** @jsx React.DOM */
'use strict';

var StyleSheet = require('react-style');
var React = require('react');

var HoverAction = React.createClass({
    render: function() {
        return (
            <div style={HoverActionStyles.normal}>
                <div ></div>
                <div style={HoverActionTitleStyle.normal} >{this.props.title}</div>
            </div>
        );
    }
});

var HoverActionStyles = StyleSheet.create({
    normal: {
        height: '200px',
        width: '200px',
        border: '1px solid black'        
    }
});

var HoverActionTitleStyle = StyleSheet.create({
    normal: {
        textAlign: 'center',
        fontSize: '10px'        
    }
});

module.exports = HoverAction;