如何正确使用 React-Toolbox 的默认样式？
我想试试这个库，但在尝试配置 scss/css 时浪费了几个小时。我可以导入和渲染 react-toolbox 组件，但它们没有样式。使用public/index.html 中的标签，
Roboto 字体和材料可以正常工作<link>
根据简单的安装步骤，我已经包含了 css-loader、sass-loader 和 babel。
我从https://github.com/react-toolbox/react-toolbox-example复制了示例项目。我删除了额外的样式表，例如几个地方的 style.scss，以减少和减少混乱。我注意到示例项目还包括<link rel="stylesheet" href="react-toolbox.css">（我在安装步骤、文档或自述文件中没有看到）。这<link>是必需的，删除它会取消示例的样式。（边问：如何以及在哪里结束 css 文件构建/获得服务？即使在本地使用 npm 服务后，它也不在目录中。）
因此，我从示例中复制了所有/大部分 index.jsx、package.json 和 webpack.config.js，并添加了该样式表<link>，将文件名与示例和我的配置相匹配。
我正在使用import 'react-toolbox/lib/commons'.
样式链接和导入似乎没有效果。运行时我没有来自 npm/webpack 的错误npm start。类似的 github 问题之一有一条评论，表示惊讶于类似问题没有 webpack 错误。
我也试过 [3]（见评论），虽然我不明白那是做什么的。那张海报暗示它并不理想，而且我在其他地方还没有看到这种模式。
我知道这可能会重复React-toolbox 如何正确包含样式。我的代表太低了，无法在那里发表评论，这个问题目前没有答案。由于相关问题似乎很常见，我希望社区回答会有所帮助。
在各种问题中，听起来它通常只是一个 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'));