css - 组件样式未在 Angular 4 中捆绑

Question

在我的组件中有

styles: [require('./hero.component.css')],

当我构建应用程序时

ng build --prod

该文件中的样式未包含在包中。我也看不到运行已编译应用程序的样式。

我也试过

styleUrls: ['./hero.component.css']

它在编译后的应用程序中工作，但它不捆绑样式，而是添加内联。

有没有办法捆绑组件样式并使其在生产中构建时起作用？

(应用程序是使用 ng new proj 创建的)

Answer 1

我有一个 reply on Github

This works as intended.

If you specify the styles as part of the component then the styles get prefixed with component specific selector and will be inlined into the generated code. This is done intentionally to allow you to have style isolation as well as ability to code split your style-sheets along with your code for more optimal lazy-loading.

显然不可能与生成的元素捆绑在一起，您需要一个自定义的 webpack 来捆绑。

也用这个

styles: [require('./hero.component.css')],

似乎有点危险，因为它适用于开发，但不是在 ng build --prod 上生成的。使用 styleUrls 也适用于生产环境。