我正在尝试弄清楚如何自定义主题，如下所述:
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'
最佳答案
由于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
关于angular - Kendo Angular 2 主题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41856955/