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

【问题标题】：MeteorJS Angular 4 component with stylus include带有手写笔的 MeteorJS Angular 4 组件包括
【发布时间】：2017-05-13 08:13:12
【问题描述】：

我很高兴在一个新的 MeteorJS 项目中编写 Angular 4 组件。对于 Meteor 和 Stylus，我认为在 main.styl 中导入所有 stylus 文件是很常见的，然后将其转换为临时构建文件夹中的 merged-stylesheets.css。

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

有没有办法不在main.styl 中全局导入文件，而只在组件文件本身中导入文件？

【问题讨论】：

标签： angular meteor stylus

【解决方案1】：

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

使用“styleUrls” 或者 “样式：[]”

【讨论】：

我正在使用 Stylus 预处理器。我没有使用 CSS，所以我不能使用 styleUrls。我的 CSS 连接在 Meteor 的 build 文件夹中。

【解决方案2】：

我认为您可以仅使用 View Encapsulation 将您的样式限制为组件文件。

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

Emulated（默认）- 来自主 HTML 的样式传播到零件。此组件的 @Component 装饰器中定义的样式仅限于此组件。
Native - 来自主 HTML 的样式不会传播到组件。在这个组件的 @Component 装饰器中定义的样式是作用域的仅限此组件。
None - 来自组件的样式传播回主 HTML 和因此对页面上的所有组件都是可见的。小心应用程序中具有 None 和 Native 组件的应用程序。全部使用 None 封装的组件将重复其样式在所有具有 Native 封装的组件中。

@Component({
// ...

封装：ViewEncapsulation.None，

样式：[

// ...
] })

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

希望对你有帮助:)

【讨论】：

不确定如果我说得足够清楚，我在 Meteor 的组件文件夹中使用了单独的 STYLUS 文件，我需要在根级别导入。如果能够以某种方式仅将该手写笔文件包含到组件中，那就太好了。因此，在当前的 MeteorJS 设置中，手写笔将被转换为位于根目录中的串联 CSS 文件。如果是 CSS 文件，我可以直接将其导入组件中。
我从未使用过 STYLUS，但我认为它就像我们预处理的 sass 一样。仅在组件中包含样式使用 viewEncapsulation.Native 并且当我们使用 viewEncapsulation.Native 时，您需要一些将 STYLUS 转换为 CSS 的方法在 Angular cli 中服务。还可以在 Angular cli 中选择默认样式文件类型。根据该更改您在 angularcli.json 中的应用程序设置。如果您使用 viewencapsulation native，那么该组件样式文件将仅适用于该组件。
我会看看文档并玩。感谢您的建议。