Angular CLI新项目无法加载styles.css问题求助

Hey there! Let's work through this weird styles.css issue you're seeing in Chrome's DevTools Network panel. I've dealt with similar quirks when setting up Angular projects, so here are the most practical fixes to try:

• Leverage Angular CLI's built-in style handling (don't manual import unless needed)
  Angular CLI automatically handles global style imports out of the box—you probably don't need to add a <link> tag in index.html at all. Open up your angular.json file, navigate to the architect > build > options > styles array, and you'll likely see src/styles.css already listed there. If it is, delete the manual <link> you added to index.html and restart ng serve—this often fixes duplicate request or loading anomalies.

• Double-check your path if you must manual import
  If you have a specific reason to add the stylesheet manually, make sure the path is correct. For a styles.css in your src directory, use the relative path:

  <link rel="stylesheet" href="styles.css">
  

  Absolute paths can break with ng serve's local dev server setup. Also, triple-check the filename spelling—did you accidentally type style.css instead of styles.css? It's an easy mistake to make! 😅

• Clear caches (both browser and Angular build)
  Caches are often the culprit here. First, force-refresh Chrome with Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac) to bypass cached resources. Then, clear Angular's build cache by running:

  ng clean
  

  After that, restart ng serve. If the issue persists, go to Chrome's settings > Clear browsing data, select "Cached images and files", and restart your browser.

• Verify Chrome DevTools Network panel settings
  Take a quick look at your DevTools Network tab—make sure you haven't accidentally enabled any filters that might hide or misreport the stylesheet request. Ensure the filter is set to "All", and check if "Disable cache" is toggled on (try toggling it off if it is, then refresh). Also, note the request status code: a 404 means your path is wrong, while a 200 with no style effect points to cache or specificity issues.

• Recreate the project as a last resort
  If nothing else works, there might have been a glitch during project initialization. Back up your current project, then run ng new to create a fresh project. Compare the configuration files (like angular.json and index.html) with your original project—you might spot a misconfiguration that's causing the issue.

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