toastr не отображается при импорте в файл jsx - PullRequest
Новая
       14

toastr не отображается при импорте в файл jsx

0 голосов
/ 28 сентября 2018

У меня есть приложение реагирования, которое использует веб-пакет для объединения JS и CSS в 1 файл и вывода его в папку назначения.Недавно я добавил toastr в 1 из моего jsx-файла: 

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

Запустив приложение и просмотрев исходный код, я подтвердил в браузере (просмотр исходных файлов), что toastr.min.jsвключается в комплект JS, а toastr.min.css входит в комплект CSS.Однако уведомление тостера не отображается.Там нет ошибки, и полоса прокрутки появляется на правой стороне в течение нескольких секунд, поэтому я подозревал, что код toastr работает, просто по какой-то причине CSS не работает должным образом.

Я удалил эту строку: 

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

, а затем непосредственно добавили это в html 

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

, и теперь это работает.Но я хочу, чтобы он работал, когда toastr.min.css входит в комплект.Я что-то упускаю? 1012

webpack config 

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]"
                }
            }]
        }]
    }
};
...