剑道Angular 2主题 [英] Kendo Angular 2 Themes
问题描述
我正在尝试找出如何自定义主题，如下所示:
I'm trying to figure out how to customize a theme as outlined here:
http://www.telerik.com/kendo-angular- ui/components/styling/
我不知道是在自定义主题"部分下.它描述了能够直接在自己的应用程序中更改scss变量的方法，但这对我不起作用.究竟需要什么参考资料才能做到这一点?
What I can't figure out is under the section Custom Themes. It describes being able to change the scss variables directly in your own application, but this isn't working for me. Exactly what references do I need in place so I can do this?
$accent: #ff69b4;
@import "~@progress/kendo-theme-default/scss/all";
我可以将其放在组件样式文件中...但是我仍然缺少某些内容(它什么也没做).
I can put this in my component style file... but I'm still missing something (it does nothing).
这里引用的正确的模块路径"是什么?
What is the "correct path to modules" that they reference here?
@Component({
selector: 'my-app',
styleUrls: [
// load the default theme (use correct path to modules)
'styles.scss'
推荐答案
Due to style encapsulation, if you put this in a component it's going go be applied only to your component's own html.
您希望将主题应用于整个html，因此可以将其放置在ViewEncapsulation设置为none的根组件(通常是应用程序组件)上，或将其放置在<head>中声明的全局scss文件中
You want your theme to be applied to the whole html, so you can either put this on your root component (usually app component) with ViewEncapsulation set to none, or put this in a global scss file declared in your <head>.
以下是第一种选择的代码(在我看来，这是最干净的):
Here's some code for the first option (the cleanest, in my opinion) :
app.component.ts:
app.component.ts :
@Component({
selector: 'app',
template: require('./app.component.html'),
encapsulation: ViewEncapsulation.None,
styles: [require('./app.component.scss')]
})
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，您可以执行以下操作:
Now, this means you have to be able to use scss on your project. For example, with webpack, you can do this:
module: {
loaders: [
{ test: /\.scss$/, loader: 'to-string!css!sass' },
...
您将需要使用css-loader和sass-loader npm软件包.
You will need to use css-loader and sass-loader npm packages.
您可以在_variables.scss文件中找到所有可以自定义的变量: https://github.com/telerik/kendo-theme -default/blob/master/scss/_variables.scss
You can find all the variables you can customize in the _variables.scss file : https://github.com/telerik/kendo-theme-default/blob/master/scss/_variables.scss
这篇关于剑道Angular 2主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
