时间戳

首页 > 解决方案 > 如何从 .NET Core 中的主视图和单个视图捆绑 CSS？

css - 如何从 .NET Core 中的主视图和单个视图捆绑 CSS？

问题描述

我在项目中有以下内容。

_Layout.cshtml - Master page
  <environment names="Development">
      <link rel="stylesheet" href="~/css/site.css" />
  </environment>
  <environment names="Staging,Production">
      <link rel="stylesheet" href="~/css/site.min.css" />
  </environment>

Page1.cshtml   - uses Master page
  <environment names="Development">
      <link type="text/css" rel="stylesheet" href="~/css/page1.css">
  </environment>
  <environment names="Staging,Production">
      <link type="text/css" rel="stylesheet" href="~/css/page1.min.css">
  </environment>        

About.cshtml   - uses Master page
  <!-- no styles specific to the page -->

我正在尝试创建一个捆绑包以将 css 作为单个文件提供服务。所以在 bundleconfig.json 我有以下内容：

{
  "outputFileName": "wwwroot/css/site.min.css",
  "inputFiles": [
    "wwwroot/css/site.css"
  ]
},
{
  "outputFileName": "wwwroot/css/page1.bundled.min.css",
  "inputFiles": [
    "wwwroot/css/site.css",
    "wwwroot/css/page1.css"
  ]
}

因此，当我服务器 Page1.cshtml 时，我将样式声明更改为以下内容：

<environment names="Staging,Production">
    <link type="text/css" rel="stylesheet" href="~/css/page1.bundled.min.css">
</environment>

而 About.cshtml 仅依赖于母版页中的单个 site.min.css 文件。

但是，在这种情况下，Page1.cshtml 最终会同时提供 site.min.css（来自母版页）和 page1.bundled.min.css（已经包含 site.css）。这显然是错误的。

那么从主页面和单个页面捆绑文件的正确方法是什么？我是否从母版页中提取所有样式并直接从各个视图中提供特定于页面的捆绑包？这有点违背了拥有母版页的目的。

PS我之前问过这个问题，但我没有正确解释这个问题。

标签： css.net-corebundling-and-minification

解决方案

推荐阅读