我已经在我的ReactJS页面上添加了一个CSS文件。

当我使用“ npm start”运行应用程序时，样式工作完全正常，但是当我使用“ npm run build”进行生产构建时，出现以下错误：

"Unexpected token,expected ;"

 react-authentication-frontend@1.0.0 lint C:\Users\Simon\Documents\GitHub\videoinwerken\react_frontend
> eslint ./src ./tests

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .
You are using a whole package of antd,please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
C:\Users\Simon\Documents\GitHub\videoinwerken\react_frontend\node_modules\babel-core\lib\transformation\file\index.js:558
      throw err;
      ^

SyntaxError: C:/Users/Simon/Documents/GitHub/videoinwerken/react_frontend/src/components/Pages/Employer/Employees/AddEmployees/style.css: Unexpected token,expected ; (2:5)
  1 | html,> 2 | body {
    |      ^
  3 |   width: 100%;
  4 |   height: 100%;
  5 | }
    at Parser.pp$5.raise (C:\Users\Simon\Documents\GitHub\videoinwerken\react_frontend\node_modules\babylon\lib\index.js:4454:13)

在下面查看我的代码

SomePage.js

import React,{ Component } from "react";

import "./style.css";

export default class ExcelPage extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>hello,this page is broken</div>;
  }
}

style.css

html,body {
  width: 100%;
  height: 100%;
}

我正在运行以下Webpack配置：

Webpack

const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

const PROD = process.env.NODE_ENV === 'production';
const DEV = !PROD;
const DevToolPlugin = PROD
    ? webpack.SourceMapDevToolPlugin
    : webpack.EvalSourceMapDevToolPlugin;

const config = {
    entry: ["./src/index"],output: {
        filename: DEV ? "bundle.js" : "bundle.[hash].js",path: path.resolve(__dirname,"dist"),publicPath: "/"
    },module: {
        rules: [
            {
                test: /\.css$/i,use: [MiniCssExtractPlugin.loader,'css-loader'],},{
                test: /\.js$/,use: "babel-loader",exclude: /node_modules/
            },{
                test: /\.(jpe?g|png|gif|svg)$/,use: [
                    {
                        loader: "url-loader",options: {
                            limit: 20000
                        }
                    },"image-webpack-loader"
                ]
            },{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: "url-loader?limit=10000&mimetype=application/font-woff"
            },{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: "file-loader"
            }
        ]
    },plugins: [
        new MiniCssExtractPlugin(),new HtmlWebpackPlugin({
            template: 'src/index.html',inject: true,filename: 'index.html'
        }),new DevToolPlugin({
            filename: "[file].map"
        })
    ],devserver: {
        historyApiFallback: true,}
};

!PROD && (config.devtool = 'source-map');

PROD && config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,compressor: {
            warnings: false,}
    })
);

PROD && config.plugins.push(
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    })
);

module.exports = config;

package.json

{
  "name": "react-authentication-frontend","version": "1.0.0","description": "React Authentication Frontend","main": "src/index.js","repository": "https://github.com/ZachLiuGIS/reactjs-auth-django-rest","homepage": "/videoinwerken/","scripts": {
    "clean": "rimraf ./dist","lint": "eslint ./src ./tests","build": "npm run clean && npm run test && webpack --progress --profile --colors","start": "webpack-dev-server --port 8083","test": "npm run lint && mocha --require babel-register ./tests/setup.js --recursive ./tests/**/*.spec.js","test:watch": "npm run test -- --watch"
  },"author": "Zach Liu","license": "MIT","devDependencies": {
    "babel-core": "^6.26.3","babel-eslint": "^8.2.6","babel-loader": "^7.1.5","babel-plugin-transform-class-properties": "^6.24.1","babel-plugin-transform-object-rest-spread": "^6.26.0","babel-preset-env": "^1.7.0","babel-preset-react": "^6.24.1","bootstrap": "^4.5.0","chai": "^4.2.0","chai-as-promised": "^7.1.1","classnames": "^2.2.6","css-loader": "^0.28.11","enzyme": "^3.11.0","enzyme-adapter-react-16": "^1.15.2","eslint": "^4.19.1","eslint-plugin-react": "^7.20.0","extract-text-webpack-plugin": "^3.0.1","file-loader": "^1.1.11","font-awesome": "^4.7.0","html-webpack-plugin": "^2.30.1","image-webpack-loader": "^3.6.0","jquery": "^3.5.1","jsdom": "^11.12.0","mini-css-extract-plugin": "^1.0.0","mocha": "^4.1.0","popper.js": "^1.16.1","prop-types": "^15.7.2","proptypes": "^1.1.0","react-test-renderer": "^16.13.1","redux-logger": "^3.0.6","rimraf": "^2.7.1","sinon": "^4.5.0","sinon-chai": "^2.14.0","style-loader": "^0.19.1","url-loader": "^0.6.2","webpack": "^4.1.0","webpack-dev-server": "^3.11.0"
  },"dependencies": {
    "@material-ui/core": "^4.10.2","@material-ui/icons": "^4.9.1","@material-ui/lab": "^4.0.0-alpha.56","antd": "^3.20.1","axios": "^0.19.2","dnd-core": "^2.6.0","fontsource-roboto": "^2.1.4","immutability-helper": "^3.1.1","lodash": "^4.17.15","material-ui": "^0.20.2","nodemailer": "^6.4.13","react": "^16.13.1","react-beautiful-dnd": "^13.0.0","react-dnd": "^2.6.0","react-dnd-html5-backend": "^2.6.0","react-dom": "^16.13.1","react-excel-renderer": "^1.1.0","react-player": "^2.6.0","react-redux": "^5.1.2","react-router-dom": "^5.2.0","redux": "^3.7.2","redux-form": "^7.4.3","redux-form-validators": "^2.7.5","redux-notifications": "^4.0.1","redux-thunk": "^2.3.0","webpack-cli": "^3.3.7","html-webpack-plugin": "^3.2.0"
  }
}

.babelrc

{
  "presets": [
    "react",[
      "env"
    ]
  ],"plugins": [
    "transform-class-properties","transform-object-rest-spread"
  ]
}