Angular 5 CLI中如何将Bootstrap 4 CSS设为外部链接并自动复制？

Hey there! Let’s break down your two Angular 5 migration questions step by step— I’ve messed around with these exact config tweaks before, so I’ve got you covered.

1. Configure Build to Generate External CSS Link Tags Instead of Inlining CSS #

When you import Bootstrap via style.css or the styles array in .angular-cli.json, Angular CLI defaults to inlining CSS into the HTML in development mode (production builds usually extract CSS to external files automatically). To force external CSS files for all environments, adjust your CLI config:

• Open your .angular-cli.json file and locate the apps array (your app’s config is typically the first item in this array).
• Add or update the extractCss property to true:

  "apps": [
    {
      // Other existing configs...
      "extractCss": true,
      // Other existing configs...
    }
  ]
  

• After this change, both ng serve (development) and ng build --prod (production) will extract all compiled CSS into separate .css files, which the CLI will reference via <link> tags in your final HTML. Note: Production mode already has extractCss enabled by default, so this tweak is mostly for making development builds match production’s behavior.

2. Automatically Copy Bootstrap CSS from node_modules to Assets/Vendor Directory #

Manual copying definitely goes against the CLI’s automation philosophy— here’s how to set up automatic copying via the CLI’s built-in assets configuration:

• Open .angular-cli.json again, and find the assets array under your app’s config.
• Add a new object to this array to define the copy rule:

  "assets": [
    "assets",
    "favicon.ico",
    {
      "glob": "bootstrap.min.css",
      "input": "../node_modules/bootstrap/dist/css",
      "output": "./assets/vendor/css"
    }
  ]
  

• Let’s break down the properties:
  • glob: The filename pattern to match (use *.css if you want to copy all Bootstrap CSS files, not just the minified one).
  • input: The source directory relative to your src folder. Since node_modules lives at the project root (outside src), we use ../ to navigate up one level.
  • output: The target directory relative to the dist folder after build. This example will place bootstrap.min.css in dist/assets/vendor/css/.
• Now every time you run ng serve or ng build, the CLI will automatically copy the specified Bootstrap CSS file to your target directory— no manual work required.

内容的提问来源于stack exchange，提问作者Max Bündchen