React-Toolboxテーマエラー

Question

反応ツールボックスのWebサイトから基本ボタン実装をコピーしましたが、反応ツールボックスのテーマにエラーが表示されるようです。エラーのスクリーンショットをご覧ください。

マイindex.js

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import { Button } from 'react-toolbox/lib/button'; 
 

 
ReactDOM.render(
 
     <Button label="Hello World!" />, 
 
     document.getElementById('app') 
 
);

マイwebpack.config.jsが

var HTMLWebpackPlugin = require('html-webpack-plugin'); 
 
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({ 
 
\t template: __dirname + '/app/index.html', \t 
 
\t filename: 'index.html', 
 
\t inject: 'body' 
 
}); 
 

 
module.exports = { 
 

 
\t entry: __dirname + '/app/index.js', 
 
\t module: { 
 
\t \t loaders: [ 
 
\t \t \t { 
 
\t \t \t \t test: /\.js$/, 
 
\t \t \t \t exclude: /node_modules/, 
 
\t \t \t \t loader: 'babel-loader' 
 
\t \t \t } 
 
\t \t ] 
 
\t }, 
 
\t output: { 
 
\t \t filename: 'transformed.js', 
 
\t \t path: __dirname+'/build' 
 
\t }, 
 
\t plugins: [HTMLWebpackPluginConfig] 
 
};

ファイルファイルとpackage.jsonファイル

{ 
    "name": "react2", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "build": "webpack", 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-toolbox": "^2.0.0-beta.7" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.23.1", 
    "babel-loader": "^6.3.2", 
    "babel-preset-react": "^6.23.0", 
    "html-webpack-plugin": "^2.28.0", 
    "webpack": "^2.2.1", 
    "webpack-dev-server": "^2.4.1" 
    } 
} 

This is the error screenshot

私は何かが足りないのですか？すべてのウェブサイトにはnpm install --save react-toolboxと書かれているので、それ以上のものはありません。

注 - npm buildは正常に動作します。 npm startがエラーを返します。

案内してください:)

Answer 1

を反応させ、ツールボックスをドキュメント

からは、ツールボックスがPostCSS/cssnext機能を使用して書かれたスタイルシートをインポートするために、デフォルトでCSSモジュールを使用しています反応します。すでにCSSでバンドルされているコンポーネントをインポートする場合、モジュールバンドラはこれらのPostCSSモジュールを必要とするはずです。

webpack設定ファイルには、postCSSファイルを処理するローダ/ルールはありません。以下のwebpack設定ファイルを確認してください。あなたはサスを使用していない場合は、sass-loaderルールを削除することができます

webpack.config.js

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

module.exports = { 
    devtool: 'inline-source-map', 
    entry: path.join(__dirname, 'app/index.js'), 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'transformed.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     use: 'babel-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      use: ['css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]!postcss-loader'] 
     }) 
     }, 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      use: ['css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader', 'sass-loader'] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('styles.css'), 
    new HtmlWebpackPlugin({ 
     template: 'app/index.html' 
    }) 
    ] 
}; 

。

これに加えて、ルートレベル（webpack.config.jsと同じレベル）にもう1つの設定ファイルが必要です。

postcss.config.js

module.exports = { 
    plugins: { 
    'postcss-import': {}, 
    'postcss-cssnext': { 
     browsers: ['last 2 versions', '> 5%'] 
    }, 
    }, 
}; 

注：上記のすべてのパッケージがインストールされていることを確認してください