Блог

Я пытаюсь добавить использование 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

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt;  lt;meta charset="utf-8" /gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;titlegt;@ViewData["Title"] - PipelineSolutionslt;/titlegt;  lt;link rel="icon" type="image/svg" href="~/pipelines_managment.svg" /gt;  lt;script src="https://kit.fontawesome.com/7466cd573b.js" crossorigin="anonymous"gt;lt;/scriptgt;  lt;link rel="stylesheet" href="~/assets/fonts/roboto/roboto.css" asp-append-version="true"/gt;     @await RenderSectionAsync("Styles", false) lt;/headgt; lt;bodygt;   lt;partial name="_Sidebar" model="@ViewData["SidebarItems"]" /gt;   lt;div id="main-content"gt;  lt;partial name="_Navbar" /gt;  lt;div id="loading"gt;  lt;img id="loading-image" src="~/rotating_icon.gif" alt="Loading..." /gt;  lt;/divgt;  lt;div id="main-container" class="container"gt;  @RenderBody()  lt;/divgt;   lt;div id="user-notifications"gt;lt;/divgt;  lt;/divgt;    @await RenderSectionAsync("Scripts", required: false) lt;script defer src="~/dist/main.bundle.js"gt;lt;/scriptgt;lt;/bodygt; lt;/htmlgt;  

Как вы можете видеть, он добавляет файл пакета, и это здорово. но он не применяет CSS.

Может кто-нибудь, пожалуйста, сказать мне, чего мне здесь не хватает?

Мне удалось заставить это работать. с помощью

 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //and adding this plugin new MiniCssExtractPlugin({  insert:'head'  })  

Я надеюсь, что это поможет другим в том же месте.