React 工具箱使用默认 CSS 样式

Question

如何正确使用 React-Toolbox 的默认样式？

我想试用这个库，但是在尝试配置 scss/css 时浪费了时间。我可以导入和渲染 react-toolbox 组件，但它们没有样式。
Roboto 字体和 material 使用 public/index 中的 <link> 标签工作正常。html

根据简单的安装步骤，我已经包含了css-loader、sass-loader和babel。

我从 https://github.com/react-toolbox/react-toolbox-example 复制了示例项目。我在几个地方删除了额外的样式表，例如 style.scss，以减少和减少混乱。我注意到示例项目还包括 <link rel="stylesheet" href="react-toolbox.css">（我在安装步骤、文档或自述文件中没有看到）。 <link> 是必需的，删除它会取消示例的样式。（附带问题：结束 css 文件 build/get 如何以及在何处提供服务？即使在使用 npm 在本地提供服务后，它也不在目录中。）

因此，我从示例中复制了 all/most of index.jsx、package.json 和 webpack.config.js，并添加了与文件名匹配的样式表 <link>示例和我的配置。

我正在使用 import 'react-toolbox/lib/commons' 导入公共资源。

样式link和import好像没有效果。当运行 npm start 时，npm/webpack 没有错误。其中一个类似 github 问题的评论表示惊讶，类似问题没有出现 webpack 错误。

我也试过 [3]（见评论），虽然我不明白它的作用。那张海报暗示它并不理想，我在其他地方没有看到这种模式。

我知道这可能会重复 React-toolbox how to include the styles correctly。我的代表太低了，不能在那里发表评论，这个问题目前还没有答案。由于相关问题似乎很常见，我希望社区的回答会有所帮助。

在各种问题中，听起来通常只是webpack配置问题。如果是这样，我想知道正确的配置是是什么。我怀疑我在某处遗漏了一行左右的内容，或者遗漏了一些关于 React 和 Webpack 的现代前端的简单信息，这些信息可能被大多数人认为是常识；我是这些工具的新手。

我正准备导入一个不同的组件库，但相比之下，我喜欢我读到的关于 React-Toolbox 的内容，它似乎对移动设备友好，我至少想尝试一下。

package.json：（省略名称、许可证、描述）

 {
    "scripts": {
        "start": "webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors",
        "build": "webpack -d --config webpack.dev.config.js --profile --progress --colors"
    },
    "engines": {
        "node": "0.10.x"
    },
    "dependencies": {
        "autoprefixer": "^6.2.3",
        "babel-core": "^6.4.0",
        "babel-eslint": "^4.1.6",
        "babel-loader": "^6.2.1",
        "babel-plugin-react-transform": "^2.0.0",
        "babel-preset-es2015": "^6.3.13",
        "babel-preset-react": "^6.3.13",
        "classnames": "^2.2.3",
        "css-loader": "^0.9.1",
        "extract-text-webpack-plugin": "^1.0.1",
        "j-toker": "0.0.10-beta3",
        "jquery": "2.2.0",
        "jsuri": "^1.3.0",
        "jsx-loader": "^0.12.2",
        "node-sass": "^3.4.2",
        "normalize.css": "^3.0.3",
        "postcss-loader": "^0.8.0",
        "react": "^0.14.6",
        "react-addons-css-transition-group": "^0.14.6",
        "react-dom": "^0.14.6",
        "react-router": "^1.0.3",
        "react-toolbox": "^0.14.0",
        "react-transform-catch-errors": "^1.0.1",
        "react-transform-hmr": "^1.0.1",
        "sass-loader": "^3.1.2",
        "style-loader": "^0.8.3",
        "toolbox-loader": "0.0.3",
        "webpack": "^1.12.11",
        "webpack-dev-server": "^1.8.0",
        "webpack-hot-middleware": "^2.6.0"
    }
}

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    'webpack-hot-middleware/client',
    './app/client/index.jsx'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'react-toolbox.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['', '.jsx', '.scss', '.js', '.json'],
    modulesDirectories: [
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ]
  },
  module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
           presets:['es2015','react']
        }
      },
      {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
      }
    ]
  },
  toolbox: {
    theme: path.join(__dirname, 'app/client/toolbox-theme.scss')
  },
  postcss: [autoprefixer],
  plugins: [
    new ExtractTextPlugin('react-toolbox.css', { allChunks: true }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
};

index.jsx:

import 'react-toolbox/lib/commons';

import React from 'react';
import ReactDOM from 'react-dom';

import ToolboxApp from 'react-toolbox/lib/app';
import {Button, IconButton} from 'react-toolbox/lib/button';
import Checkbox from 'react-toolbox/lib/checkbox';
import Header from './components/layout/Header';

ReactDOM.render((
    <ToolboxApp>
        <Header />
        <Button className="button" icon="add" floating accent/>
        <IconButton onClick={function(){alert('clicked')}} icon='favorite' accent />
    </ToolboxApp>
), document.getElementById('app'));

Answer 1

我将 https://github.com/react-toolbox/react-toolbox-example 中的大部分示例存储库复制到我的 app/client 目录中的一个新分支上。我只需要很少的调整，它似乎奏效了。虽然这并没有回答我在配置或文件结构方面出错的地方，而且我可能不得不重复一些努力，但我可以继续前进。

这个问题可能会受益于更好的建议如何将 React-Toolbox 添加到现有项目，而不替换现有的 folders/files。

React 工具箱使用默认 CSS 样式

React Toolbox Use Default CSS Style

css

reactjs

webpack

react-toolbox