提问者:小点点

ReactJS CSS:意外令牌“{”[已关闭]


我对ReactJS还是个新手,我不知道这里发生了什么。我正在尝试向我的ReactJS页面添加一个css文件。当我运行“npm start”时,它是有效的,但是我在“npm run build”上出现了一个错误:“underspected token{”。我也在使用webpack。

CSS调用

导入“。/ExcelPage.css”;

CSS

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

我的webpack配置:

WebPack

const webpack = require("webpack");
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-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: /\.js$/,
                use: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{
                        loader: 'css-loader'
                    }]
                }),
            },
            {
                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 ExtractTextPlugin({
            filename: DEV ? 'styles.css' : 'styles.[contenthash:6].css',
            allChunks: true
        }),
        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;

错误消息


共1个答案

匿名用户

您当前正在使用https://www.npmjs.com/package/extract-text-webpack-plugin,如果您转到他们的页面,您将看到该包已被弃用,您应该使用https://github.com/webpack-contrib/mini-css-extract-plugin。它可能是您的问题来源,尝试使用mini-css-extract-plugin,并告诉我们您是否遇到了同样的问题。