VS2017中Angular模板如何引用vendor.css之外的CSS文件？

Alright, let's get your custom CSS set up correctly. Based on what you've described, here's a step-by-step breakdown:

1. Update CSS References in _Layout.cshtml #

First, you'll need to replace the existing vendor.css reference with your custom Bootswatch bootstrap.css file. Here's how:

• Open your _Layout.cshtml file
• Locate the line that references vendor.css, which might look like this:

  <link rel="stylesheet" href="~/vendor.css" />
  

• Replace it with a direct reference to your custom CSS in the wwwroot/dist folder:

  <link rel="stylesheet" href="~/dist/bootstrap.css" asp-append-version="true" />
  

  The asp-append-version="true" attribute is a handy touch—it automatically adds a unique version hash to the URL, preventing browser caching issues when you update your CSS later.
• Don't forget to keep your Font-Awesome reference! Since you installed it via NPM, your reference might look like this (adjust the path if your NPM packages are stored in a different location):

  <link rel="stylesheet" href="~/lib/font-awesome/css/all.css" asp-append-version="true" />
  

2. Avoid Duplicate Bootstrap CSS References #

Since you've installed Bootstrap 4 and Bootswatch 4 via NPM and have a custom bootstrap.css file in wwwroot/dist, make sure you're not loading conflicting versions of Bootstrap's CSS:

• Check if vendor.css included default Bootstrap styles (it most likely did). By replacing vendor.css with your custom file, you've already removed this duplicate—just double-check no other parts of your project (like component-specific styles or secondary layout files) are loading Bootstrap separately.
• If you're using a build tool (like Webpack for your Angular ClientApp), verify your build config isn't still including the default Bootstrap CSS from NPM unless you intentionally want to layer styles (which you probably don't for a custom theme).

3. Ensure NavMenu Uses Bootstrap 4 Classes #

Since you customized navmenu.component.html, make sure the HTML structure uses Bootstrap 4's navigation classes so your Bootswatch styles apply correctly. For example:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Your App Name</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <!-- Add other menu items with matching Bootstrap classes -->
    </ul>
  </div>
</nav>

Bootswatch themes are built on top of Bootstrap's core class system, so using these standard classes will ensure your menu picks up the custom theme's styling.

4. Test and Clear Browser Cache #

After updating references, test your app to confirm styles are loading:

• Press Ctrl + F5 to force a hard refresh in your browser (this bypasses cached CSS files that might be showing old styles).
• If you still don't see your custom theme, double-check the path to bootstrap.css in _Layout.cshtml—make sure it exactly matches the file's location in wwwroot/dist.

Bonus: If Using Angular in ClientApp #

If your project uses Angular (since you have ClientApp/app/components/navmenu), you can also add your custom CSS to Angular's build config to ensure it's included in the bundled styles:

• Open angular.json
• Find the styles array under your project's build configuration
• Add the path to your custom CSS:

  "styles": [
    "../wwwroot/dist/bootstrap.css",
    "node_modules/font-awesome/css/all.css",
    "src/styles.css"
  ]
  

  This way, Angular will bundle your custom CSS along with other styles during the build process.

内容的提问来源于stack exchange，提问作者bilpor