React-Toolbox主題錯誤

Question

我從react-toolbox網站複製了基本的按鈕實現，它似乎在react-toolbox主題中出現錯誤。請查看錯誤截圖。

我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

從反應工具箱文檔

陣營工具箱使用CSS模塊默認情況下導入使用PostCSS/cssnext特點寫樣式表。如果你想導入已經與CSS捆綁的組件，你的模塊捆綁器應該能夠要求這些PostCSS模塊。

您的webpack配置文件沒有任何加載器/規則來處理postCSS文件。檢查下面的webpack配置文件。

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' 
    }) 
    ] 
}; 

，如果你不使用的Sass可以刪除sass-loader規則。

伴隨此，您需要在根級別（與webpack.config.js相同的級別）有一個更多的配置文件。

postcss.config.js

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

注：請確保您有上面提到的所有包都安裝