带有手写笔的MeteorJS Angular 4组件包括

Question

我很高兴在一个新的MeteorJS项目中编写Angular 4组件。使用Meteor和Stylus我认为在main.styl中导入所有的手写笔文件是很常见的，然后在temp build文件夹中将其转换为merged-stylesheets.css。

这很好用。但是，为了使组件易于重复使用，我必须使用组件打字稿文件和模板的stylus文件。但是，当使用Webpack作为例子时，我无法像使用CSS文件那样在组件文件中导入手写笔文件。

无论如何不在main.styl中全局导入文件，而只是在组件文件本身中导入文件？

Answer 1

@Component({
  selector: 'app-input-form-example',
  templateUrl: './input-form-example.component.html',
  styleUrls: ['./input-form-example.component.css']
})

使用“styleUrls” 要么     “样式：[]”

Answer 2

我认为您只能使用View Encapsulation将样式限制为组件文件。

View encapsulation定义组件中定义的模板和样式是否会影响整个应用程序，反之亦然。 Angular提供了三种封装策略：

1. Emulated（默认） - 主HTML中的样式传播到 零件。此组件的@Component装饰器中定义的样式 仅限于此组件。
2. Native - 主HTML中的样式不会传播到组件。 此组件的@Component装饰器中定义的样式具有范围 仅限此组件。
3. None - 组件中的样式传播回主HTML和 因此，页面上的所有组件都可以看到。小心 应用程序中包含None和Native组件的应用程序。所有 没有封装的组件将重复其样式 在所有具有Native封装的组件中。

@Component（{
// ...

封装：ViewEncapsulation.None，

样式：[

// ...    ]   }）

http://plnkr.co/edit/E5Hb6B5dRN0llz3JuO57?p=preview

希望这会对你有所帮助:)。