剑道Angular 2主题

我试图找出如何自定义主题，如下所示：

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'

Vincent V... 6

由于样式封装，如果将其放入组件中，那么它将仅应用于组件自己的html。

您希望将主题应用于整个html，因此您可以将其放在ViewEncapsulation设置为none的根组件（通常是app组件）上，或将其放在声明的全局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

由于样式封装，如果将其放入组件中，那么它将仅应用于组件自己的html。

您希望将主题应用于整个html，因此您可以将其放在ViewEncapsulation设置为none的根组件（通常是app组件）上，或将其放在声明的全局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