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"
  }
}

github

我错过了什么吗？因为所有网站都是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%']
    },
  },
};

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

React-Toolbox主题错误

1 个答案: