剑道角2主题
剑道角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'回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-26 08:18:13
由于样式封装，如果将其放入组件中，它将只应用于组件自己的html。
您希望将主题应用于整个html，因此可以将其应用于根组件(通常是app组件)，而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-加载程序和sass-加载程序npm包。
您可以在_variables.scss文件：variables.scss中找到可以自定义的所有变量。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41856955
复制相关文章
相似问题
腾讯云开发者
