剑道 Angular 2 主题答案

【问题标题】：Kendo Angular 2 Themes剑道 Angular 2 主题
【发布时间】：2017-01-25 16:40:02
【问题描述】：

我正在尝试弄清楚如何自定义此处概述的主题：

http://www.telerik.com/kendo-angular-ui/components/styling/

我想不通的是自定义主题部分。它描述了能够直接在您自己的应用程序中更改 scss 变量，但这对我不起作用。我究竟需要哪些参考资料才能做到这一点？

$accent: #ff69b4;

@import "~@progress/kendo-theme-default/scss/all";

我可以把它放在我的组件样式文件中......但我仍然缺少一些东西（它什么都不做）。

他们在这里引用的“模块的正确路径”是什么？

@Component({
  selector: 'my-app',
  styleUrls: [
    // load the default theme (use correct path to modules)
    'styles.scss'

【问题讨论】：

这里的评论似乎有点误导，谢谢你提出这个问题。

标签： angular kendo-ui-angular2

【解决方案1】：

由于style encapsulation，如果你把它放在一个组件中，它只会应用于你组件自己的html。

您希望将您的主题应用于整个 html，因此您可以将其放在根组件（通常是应用程序组件）上，并将 ViewEncapsulation 设置为 none，或者将其放在 <head> 中声明的全局 scss 文件中.

这是第一个选项的一些代码（我认为最干净）：

app.component.ts ：

@Component({
    selector: 'app',
    template: require('./app.component.html'),
    encapsulation: ViewEncapsulation.None,
    styles: [require('./app.component.scss')]
})

app.component.scss：

/* Redefine here all the kendo theme variables you want */
$accent: red;

@import "~@progress/kendo-theme-default/scss/all";

现在，这意味着您必须能够在您的项目中使用 scss。例如，使用 webpack，您可以这样做：

module: {
    loaders: [
        { test: /\.scss$/, loader: 'to-string!css!sass' },
        ...

您将需要使用 css-loader 和 sass-loader npm 包。

您可以在 _variables.scss 文件中找到所有可以自定义的变量： https://github.com/telerik/kendo-theme-default/blob/master/scss/_variables.scss

【讨论】：

所以，也许我应该退后一步……我打破了提出问题而不实际说明我的目标的基本规则。 ; ) 我真正想要的是能够以某种方式将主题库包含在我的组件中，这样我就可以轻松调整颜色变量并测试它们产生的变化，而无需重新编译整个主题源。Telerik 的文档暗示你可以通过引用 scss 而不是输出 css 来做到这一点。老实说，我现在不介意它是仅应用于我的组件还是应用于我的整个网站 html。
嗯，这就是我的解决方案。基本上，您将整个主题的 scss 导入您自己的 scss 文件中。因此，如果您更改主题使用的任何变量，它将更改输出 css。请注意，您不是直接引用输出 css，而是引用 scss。在构建时，将由 webpack（或等效的）为您将其转换为 css。这意味着你必须能够在你的项目中使用 scss。请参阅我对该部分的编辑。
好的，谢谢文森特，我认为您为我指明了正确的方向。看来我当前的 webpack 设置可能没有按照需要的方式设置（正如您所指出的）。（我对 angular / webpack 还是很陌生。使用别人创建的模板）。无论如何，这是我当前用于处理 scss 文件的 webpack 配置： { test: /\.css?$/, loader: 'raw-loader' }, { test: /\.scss?$/, loader: 'raw -loader!csso-loader!sass' }
Sheesh...好的...所以当我将 ViewEncapsulation 放在组件级别时它可以工作......但是当我将它放在更高级别时我仍然遇到问题。即使没有关闭 viewencapsulation 并且只应用于该组件，它是否仍然应该在组件级别工作？
这行不通，因为剑道组件是子组件。因此 kendo 样式仅适用于组件内的 html，但不适用于标签下方。阅读此链接上的附录 1，并检查您自己的页面以了解封装的工作原理 :) angular.io/docs/ts/latest/guide/component-styles.html