我有一个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]"
}
}]
}]
}
};