React-工具箱主题错误

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({
	template: __dirname + '/app/index.html',	
	filename: 'index.html',
	inject: 'body'
});

module.exports = {

	entry: __dirname + '/app/index.js',
	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader'
			}
		]
	},
	output: {
		filename: 'transformed.js',
		path: __dirname+'/build'
	},
	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

来自react-toolbox文档

React工具箱默认使用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%']
    },
  },
};

注意:请确保已安装上述所有软件包