如何将.css和.js与ReactJS + Redux架构集成？

Question

I am currently following http://callmenick.com/post/animated-resizing-header-on-scroll and downloaded the source code and it has the following: 我目前正在关注http://callmenick.com/post/animated-resizing-header-on-scroll并下载了源代码，它具有以下内容：

I am using ReactJS + Redux, and Webpack. 我正在使用ReactJS + Redux和Webpack。 How should I integrate those files to my ReactJS architecture? 我应该如何将这些文件集成到我的ReactJS架构中？ For example, I don't want to throw everything into my current index.html file even though it is possible, and that is not following ReactJS. 例如，即使有可能，我也不想将所有内容都放入我当前的index.html文件中，而这并不遵循ReactJS。

EDIT 编辑

App.js: App.js：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import actions from '../redux/actions'

class App extends Component {

  render() {
    return (
        <div>
          Content
        </div>
    );
  }
}

function mapStateToProps(state) {
  return state
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

My current index.html set up: 我当前的index.html设置：

<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Practice Example</title>

    <meta name="description" content="Practice Example">

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"
    >
    <link rel="stylesheet" type="text/css" href="app.css">
  </head>

  <body>
    <div id="app"></div>
    <script>
      var WebFontConfig = {
        google: { families: [ 'Roboto:400,300,500:latin' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
    <script src="bundle.js"></script>
  </body>
</html>

EDIT 2 - webpack.config.js 编辑2-webpack.config.js

var webpack = require('webpack');

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/client.js'
  ],
  output: {
    path: require("path").resolve("./dist"),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015', 'react-hmre', 'stage-0']
        }
      }
    ]
  }
}

Answer 1

Basically you want to build your CSS/LESS/SCSS stylesheets using Webpack. 基本上，您想使用Webpack构建CSS / LESS / SCSS样式表。 You'll want to grab style-loader and the style-loader for each markup you're using. 您将要抓取样式加载器和正在使用的每个标记的样式加载器。 Then, you set up a module that tests your stylesheets and loaders them with the style-loader. 然后，您设置一个模块来测试样式表并使用样式加载器加载它们。

{
    // ...
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
}

It's all here https://webpack.github.io/docs/stylesheets.html 都在这里https://webpack.github.io/docs/stylesheets.html

EDIT 编辑

var webpack = require('webpack');

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/client.js'
  ],
  output: {
    path: require("path").resolve("./dist"),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015', 'react-hmre', 'stage-0']
        }
      },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.scss$/, loader: "style-loader!sass-loader" }
    ]
  }
}

如何将.css和.js与ReactJS + Redux架构集成？

问题描述

1 个解决方案

解决方案1
3 2016-08-16 18:57:42

如何将.css和.js与ReactJS + Redux架构集成？

问题描述

1 个解决方案

解决方案1 3 2016-08-16 18:57:42

解决方案1
3 2016-08-16 18:57:42