Kendo Angular 2 Themen

Ich versuche, herauszufinden, wie man ein Thema zu gestalten, wie hier beschrieben:Kendo Angular 2 Themen

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

Was kann ich nicht herausfinden, ist unter dem Abschnitt Benutzerdefinierte Themen. Es beschreibt die Fähigkeit, die scss-Variablen direkt in Ihrer eigenen Anwendung zu ändern, aber das funktioniert nicht für mich. Welche Referenzen brauche ich, damit ich das machen kann?

$accent: #ff69b4; 

@import "[email protected]/kendo-theme-default/scss/all";

Ich kann dies in meine Komponente Style-Datei einfügen ... aber mir fehlt noch etwas (es tut nichts).

Was ist der "richtige Pfad zu Modulen", auf den sie sich beziehen?

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

Quelle

2017-01-25 BriDev

Scheinen, wie der Kommentar ein bisschen hier irreführend ist, dank dies für die Erziehung. –

Aufgrund style encapsulation, wenn Sie dies in einer Komponente setzen, es wird nur eigene HTML-Code der auf die Komponente angewendet gehen.

Sie möchten, dass Ihr Design auf den gesamten HTML-Code angewendet wird. Sie können dies entweder auf Ihre Root-Komponente (in der Regel App-Komponente) mit ViewEncapsulation auf none setzen oder in eine globale scss-Datei in Ihrer <head>.

Hier ist ein Code für die erste Option (die saubersten, meiner Meinung nach):

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 "[email protected]/kendo-theme-default/scss/all";

Das bedeutet nun, dass Sie scss in Ihrem Projekt verwenden können müssen. Zum Beispiel mit webpack, können Sie dies tun:

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

Sie müssen CSS-loader und sass-loader npm von Paketen benutzen.

Sie können alle Variablen finden Sie in der _variables.scss Datei anpassen: https://github.com/telerik/kendo-theme-default/blob/master/scss/_variables.scss

Quelle

2017-01-26 08:18:13

Also, vielleicht sollte ich ein bisschen zurücktreten ... Ich habe die Grundregel gebrochen, eine Frage zu stellen, ohne mein Ziel zu nennen. ;) Was ich wirklich will, ist, dass ich in der Lage bin, die Themenbibliotheken so in meine Komponente einzubinden, dass ich die Farbvariablen leicht anpassen und die daraus resultierenden Änderungen testen kann, ohne die gesamte Themenquelle neu kompilieren zu müssen. Die Dokumentation von Telerik hat Sie impliziert könnte dies tun, indem sie auf die scss anstelle der Ausgabe css verweisen. Es macht mir ehrlich gesagt nichts aus, ob es zu diesem Zeitpunkt nur auf meine Komponente oder auf meine gesamte Website angewendet wird. – BriDev

Nun, das ist meine Lösung. Im Grunde importieren Sie die Scss des gesamten Themas in Ihre eigene scss-Datei. Wenn Sie also eine vom Theme verwendete Variable ändern, wird die Ausgabe-CSS geändert. Beachten Sie, dass Sie nicht direkt auf die Ausgabe-CSS verweisen, sondern auf die SSS. Es ist Webpack (oder gleichwertig), die dies beim Bauen in CSS für Sie transformieren wird. Das bedeutet, dass Sie scss in Ihrem Projekt verwenden können müssen. Siehe meine Bearbeitung für diesen Teil. –

Ok, danke Vincent, ich glaube du zeigst mir in die richtige Richtung. Es scheint, dass mein aktuelles Webpack-Setup möglicherweise nicht so eingerichtet ist, wie dies erforderlich ist (wie Sie darauf hingewiesen haben). (Ich bin noch sehr neu in eckig/webpack .. mit einer Vorlage von jemand anderem erstellt). Jedenfalls hier ist meine aktuelle webpack Config für SCSS Dateien Handhabung: { Test: /\.css?$/, Lader: 'raw-loader' }, { Test:/\ .scss? $ /, loader: 'raw-loader! csso-loader! sass' } – BriDev

Kendo Angular 2 Themen

Antwort

Verwandte Themen