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({
	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 Toolbox 默认使用 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%']
    },
  },
};

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