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

【问题标题】：How to integrate .css and .js with ReactJS + Redux architecture?如何将 .css 和 .js 与 ReactJS + Redux 架构集成？
【发布时间】：2016-08-17 04:32:45
【问题描述】：

我目前关注http://callmenick.com/post/animated-resizing-header-on-scroll并下载了源代码，它有以下内容：

我正在使用 ReactJS + Redux 和 Webpack。我应该如何将这些文件集成到我的 ReactJS 架构中？例如，即使有可能，我也不想将所有内容都放入当前的 index.html 文件中，这不符合 ReactJS 的要求。

编辑

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)

我当前的 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>

编辑 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']
        }
      }
    ]
  }
}

【问题讨论】：

标签： javascript html reactjs webpack redux

【解决方案1】：

基本上你想使用 Webpack 构建你的 CSS/LESS/SCSS 样式表。您需要为您正在使用的每个标记获取 style-loader 和 style-loader。然后，您设置一个模块来测试您的样式表并使用样式加载器加载它们。

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

都在这里https://webpack.github.io/docs/stylesheets.html

编辑

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" }
    ]
  }
}

【讨论】：

我用App.js 和我的index.html 更新了原始帖子。我只想将导航栏实现到App.js。你能用App.js 举例说明你的建议吗？比如如何调用.css，如何设置模块，源代码index.html和classie.js应该从哪里调用？看过网站，但需要更好的说明。提前谢谢！
您也可以发布您的 webpack.config.js 文件吗？至于如何包含它，您需要像导入 JavaScript 类一样导入样式表。例如，如果你有一个 React 组件 App.js，并且它的样式在 App.css 中，你可以将它导入到你的 App.js 中： import './App.css' 在你的 JS 的顶部。对于您的特定情况，我会首先寻找与该库具有类似功能的 React 库。否则你最好的选择是围绕它构建一个 React 包装器。
感谢您的澄清！刚刚在 EDIT 2 下的原始帖子中添加了 webpack.config.js。
因此，您需要按照我在答案中发布的方式为 CSS 和 SCSS 添加加载器。但是，这只会帮助您处理 client.js 或 client.js 的后代引用的代码。所以，如果你想在你的 React 代码中使用非 React 库，你必须编写一个 React 包装器。也就是说，如果你能找到一个 React 库，它将更适合你的代码并利用 React。
抱歉，您介意编辑您的答案并显示以澄清如何添加加载程序吗？你指的是什么非 React 库？最后，将这些源代码 index.html 和 classie.js 集成到我的 App.js 使用的正确 React 方法是什么？