styleUrls - 无法使用 angular 2 中的相对路径加载组件的 css 样式表

问题描述

我在angular 2的app/Hero"下定义了一个Hero"组件.定义了hero.component.html"、hero.component.css"和hero.component.ts"文件的hero组件.templateUrl 工作正常，但 styleUrls 无法加载.将显示资源未找到错误.我参考了这个链接 https://angular.io/docs/ts/latest/guide/component-styles.html#!#relative-urls 使用相对 URL 加载样式.

I have a "Hero" component defined under "app/Hero" in angular 2. The hero component as "hero.component.html","hero.component.css" and "hero.component.ts" files defined. the templateUrl works fine but the styleUrls do not load. Resource not found error will be displayed. I referred this link https://angular.io/docs/ts/latest/guide/component-styles.html#!#relative-urls to load styles using relative URLs.

  @Component({
  providers: [HeroService],
  templateUrl: './Hero.component.html',
  styleUrls: ['./Hero.component.css'],
})

推荐答案

这对我有用:

styles: [require('./app.component.css').toString()]

而且你必须改变 webpack.config.js.您必须指定下一个，而不是 'raw-loader':

And you have to change webpack.config.js. Instead of 'raw-loader' you have to specify the next:

loader: 'style-loader!css-loader'

这篇关于styleUrls - 无法使用 angular 2 中的相对路径加载组件的 css 样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！