在jsx文件中导入时,toastr不显示

时间:2018-09-28 09:49:26

标签: reactjs webpack toastr

我有一个react应用,该应用使用webpack将JS和CSS捆绑为1个文件,并将其输出到目标文件夹中。我最近将Toastr添加到了我的jsx文件中的1个:

import toastr from "toastr";
import "toastr/build/toastr.min.css"

运行该应用程序并查看源代码,我已经在浏览器中(查看源文件)验证了JS包中包含toastr.min.js以及CSS包中包含toastr.min.css。但是,烤面包机通知不会显示。没有错误,滚动条在右侧显示了几秒钟,因此我怀疑Toastr代码正在工作,只是CSS由于某种原因没有正确地设置样式。

我删除了这一行:

import "toastr/build/toastr.min.css"

,然后将其直接添加到html

<link rel="stylesheet" type="text/css" href="~/css/toastr.min.css" />

,现在可以使用了。但我想在捆绑包中包含toastr.min.css的地方使用它。我有什么想念的吗?

Webpack配置

const path = require("path");
const webpack = require("webpack");
const miniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        home: "./Scripts/Components/Home/main.js",
        login: "./Scripts/Components/Login/main.js",
        vendor: [
            "jquery",
            "react",
            "react-dom",
            "react-router-dom",
            "react-css-modules",
        ]
    },

    mode: "development",

    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    chunks: "all",
                    name: "vendor",
                    test: "vendor",
                    enforce: true
                }
            }
        }
    },

    output: {
        publicPath: "/js/",
        path: path.join(__dirname, "/wwwroot/js/"),
        filename: "[name].bundle.js"
    },

    devtool: "source-map",

    plugins: [
        new miniCssExtractPlugin({
            filename: "../css/[name].css"
        }),
    ],

    module: {
        rules: [{
            test: /\.jsx$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["env", "react"]
                }
            }
        }, {
            test: /\.css$/,
            use: [{
                loader: miniCssExtractPlugin.loader,                        
            }, {
                loader: "css-loader",
                query: {
                    modules: true,
                    localIdentName: "[name]__[local]___[hash:base64:5]"
                }
            }]
        }]
    }
};

0 个答案:

没有答案