我正在嘗試添加使用webpack，但它不會將 CSS 添加到cshtml檔案中。
webpack.common.config
const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
target: 'web',
entry: ['./Client/src/app.js', './Client/src/app.scss'],
output: {
filename: '[name].bundle.js',
path: __dirname '/wwwroot/dist/',
chunkFilename: '[id].js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.js$/,
use: 'webpack-import-glob-loader'
},
{
test: /\.scss$/,
use: 'webpack-import-glob-loader'
},
],
},
plugins: [
new HtmlWebpackPlugin({
inject: "body",
filename: "../../Views/Shared/_LoginLayout.cshtml",
template: "./Views/Shared/_LoginLayout_Template.cshtml"
}),
new HtmlWebpackPlugin({
inject: "body",
filename: "../../Views/Shared/_Layout.cshtml",
template: "./Views/Shared/_Layout_Template.cshtml"
}),
]
};
module.exports = config;
生成_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewData["Title"] - PipelineSolutions</title>
<link rel="icon" type="image/svg" href="~/pipelines_managment.svg" />
<script src="https://kit.fontawesome.com/7466cd573b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="~/assets/fonts/roboto/roboto.css" asp-append-version="true"/>
@await RenderSectionAsync("Styles", false)
</head>
<body>
<partial name="_Sidebar" model="@ViewData["SidebarItems"]" />
<div id="main-content">
<partial name="_Navbar" />
<div id="loading">
<img id="loading-image" src="~/rotating_icon.gif" alt="Webpack 沒有將 css 注入 cshtml" />
</div>
<div id="main-container" >
@RenderBody()
</div>
<div id="user-notifications"></div>
</div>
@await RenderSectionAsync("Scripts", required: false)
<script defer src="~/dist/main.bundle.js"></script></body>
</html>
如您所見，它確實添加了很棒的捆綁檔案。但它不適用 CSS。
有人可以告訴我我在這里缺少什么嗎？
uj5u.com熱心網友回復：
我能夠讓它發揮作用。使用
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//and adding this plugin
new MiniCssExtractPlugin({
insert:'head'
})
我希望這可以幫助其他人在同一地點。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/377432.html
標籤：网络包
上一篇：將nonce添加到破壞“unsafe-eval”的第3方代碼的腳本標記
下一篇：基于事件日期前一個月的聚合