React Toolbox Использовать стиль CSS по умолчанию

Question

Как правильно использовать стиль React-Toolbox по умолчанию?

Я хотел бы попробовать эту библиотеку, но потерял часы, пытаясь настроить scss/css. Я могу импортировать и визуализировать компоненты Reaction-Toolbox, но они не стилизованы.
Шрифт и материал Roboto отлично работают, используя <link> теги в public / index.html

В соответствии с краткими инструкциями по установке, я включил css-загрузчик, sass-загрузчик и babel.

Я скопировал пример проекта с https://github.com/react-toolbox/react-toolbox-example. Я удалил лишние таблицы стилей, такие как style.scss, в нескольких местах, чтобы урезать и уменьшить путаницу. Я заметил, что пример проекта также включает в себя <link rel="stylesheet" href="react-toolbox.css"> (который я не вижу в шагах по установке, документах или README). Тот <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, как правильно включать стили. Мой представитель слишком низок, чтобы комментировать там, и этот вопрос в настоящее время остается без ответа. Поскольку связанные вопросы кажутся общими, я надеюсь, что ответ сообщества будет полезен.

В различных вопросах это звучит так, как будто это просто проблема конфигурации веб-пакета. Если это так, я хотел бы знать, каков правильный конфиг , пожалуйста. Я подозреваю, что пропускаю где-то одну строчку или около того, или пропускаю что-то простое в современном интерфейсе с 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 в существующий проект, не заменяя существующие папки / файлы.