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

Question

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

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

В соответствии с кратким описанием установки, я включил CSS-загрузчик, Sass-погрузчик и столпотворение.

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

Итак, я скопировал все/большинство index.jsx, package.json, и webpack.config.js из примера, и добавил, что таблица стилей <link>, сопоставляя имя файла с примером и моей конфигурацией.

Я импортирую общее количество с import 'react-toolbox/lib/commons'.

Ссылка на стиль и импорт, похоже, не имеют никакого эффекта. У меня нет ошибок от npm/webpack при запуске npm start. У одной из подобных проблем github есть комментарий, в котором выражается удивление, что для подобной проблемы не было ошибки в веб-пакете.

Я также пробовал [3] (см. Комментарий), хотя я не понимаю, что это делает. Этот плакат подразумевал, что он не идеален, и я не видел этого шаблона в другом месте.

Я понимаю, что это может дублировать React-toolbox how to include the styles correctly. Мой представитель слишком низок, чтобы комментировать там, и этот вопрос в настоящее время не отвечает. Поскольку смежные вопросы кажутся общими, я надеюсь, что ответ сообщества будет полезен.

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

Я скопировал наиболее примера repo в https://github.com/react-toolbox/react-toolbox-example в мой каталог приложений/клиентов, в новом филиале. Мне пришлось немного приспособиться, и, похоже, это работает.Хотя это не отвечает на то, где я ошибся с конфигурациями или файловой структурой, и мне, возможно, придется повторить некоторые усилия, я могу двигаться вперед.

Этот вопрос может принести пользу из лучших предложений о том, как добавить React-Toolbox в существующий проект, не заменяя существующие папки/файлы.