Angular 5项目及组件引入外部样式表方法与生产构建报错排查

嘿，我来帮你搞定Angular 5里引入外部样式的问题，还有你遇到的生产构建报错的坑也一起解决掉～

如果想让样式在所有组件里都能用，推荐这两种方式：

• 通过angular-cli.json配置（Angular 5专属配置文件）
  找到文件里的styles数组，把你的外部样式路径加进去就行。CLI会自动把这些样式打包到最终的生产文件里，完全不用担心路径问题：

  "styles": [
    "src/styles.css",
    "src/assets/css/bundle.css"
  ]
  

• 在根目录index.html里引入
  直接在项目根的index.html中添加<link>标签，但记得给路径加个/前缀，确保是相对于项目根目录的绝对路径：

  <link rel="stylesheet" href="/assets/css/bundle.css?v=2.1.0">
  

  这种方式适合不需要CLI打包的外部样式（比如CDN资源），本地资源也能用，生产构建不会出问题。

如果只想让样式作用于某一个组件，用这两种规范方式：

• 在组件的@Component元数据里配置styleUrls
  这是Angular官方推荐的方式，直接把外部样式的路径写进styleUrls数组，CLI会自动处理打包和样式隔离，生产构建绝对不会报错：

  @Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    // 相对当前组件的路径
    styleUrls: ['./test.component.css', '../assets/css/bundle.css']
    // 或者用从src开始的绝对路径
    // styleUrls: ['./test.component.css', 'src/assets/css/bundle.css']
  })
  

• 在组件HTML里用@import导入（不推荐但可用）
  要是你非要在组件HTML里加样式，别用<link>标签，改成在<style>里用@import：

  <style>
    @import url('../assets/css/bundle.css?v=2.1.0');
  </style>
  

  注意路径要和组件文件的位置对应，这种方式虽然能生效，但可能会有样式隔离的小问题，优先用上面的styleUrls方法。

你之前在组件HTML里用<link>标签引入时，开发正常但生产报错，原因很简单：
开发模式下浏览器直接解析相对路径没问题，但生产构建时，Angular CLI会编译组件HTML并尝试解析<link>里的资源路径，而你路径里的?v=2.1.0是查询参数，CLI没办法正确识别这个带参数的资源路径，所以就报错了。

直接用上面提到的任意一种替代方式就能解决——要么用组件的styleUrls，要么在全局index.html里加带/前缀的<link>，要么在组件HTML里换成@import。

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