剣道角度2つのテーマ

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

私が把握することはできませんどのようなセクションのカスタムテーマの下にあります。自分のアプリケーションで直接scss変数を変更できることを説明していますが、これは私のためには機能しません。私はこれをすることができるように正確に何が必要なのですか？

$accent: #ff69b4; 

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

これを私のコンポーネントスタイルファイルに入れることはできますが、まだ何かがありません（何もしません）。

ここで参照する「モジュールへの正しいパス」とは何ですか？あなたがコンポーネントでこれを置けば

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

出典

2017-01-25 BriDev

は思えます。 –

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

さて、これはあなたのプロジェクトでscssを使用できる必要があることを意味します。例えば、WebPACKので、あなたがこれを行うことができます：

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

あなたはCSS-ローダーとSASS-ローダーNPMパッケージを使用する必要があります

。あなたは_variables.scssファイルでカスタマイズできるすべての変数を見つけることができます

：コメントは、ここではこれを起動するためのおかげで少し誤解を招くようですよう https://github.com/telerik/kendo-theme-default/blob/master/scss/_variables.scss

出典

2017-01-26 08:18:13

それで、おそらく私はちょっと後退しなければなりません...実際に私の目標を述べることなく、質問をするという基本的なルールを打ち破ったのです。 ; ）私が本当に望むのは、テーマ変数全体を簡単に調整して、テーマソース全体を再コンパイルしなくてもテスト結果を見ることができるような方法で、テーマライブラリをコンポーネントに含めることです。Telerikのドキュメントには、出力CSSの代わりにscssを参照することでこれを行うことができます。私は正直なところ、それが今のところ私のコンポーネントや私のサイト全体のHTMLに適用されているかどうかは気にしません。 – BriDev

これは私の解決策です。基本的には、テーマのscss全体を独自のscssファイルにインポートします。したがって、テーマで使用される変数を変更すると、出力CSSが変更されます。出力cssを直接参照するのではなく、scssを参照していることに注意してください。これは、webpack（または同等のもの）であり、ビルド時にあなたのためにこれをCSSで変換します。これは、プロジェクトでscssを使用できる必要があることを意味します。その部分の私の編集を参照してください。 –

さて、ありがとう、ヴィンセント、私はあなたが正しい方向に私を指していると思います。私の現在のWebpackのセットアップは、（あなたが指摘したように）これが必要とする方法でセットアップされていないようです。（私は、まだ誰かが作成したテンプレートを使って、角度/ウェブパックには非常に新しいです）。いずれにしてもは、ここSCSSファイルを処理するための私の現在のWebPACKの設定です： { テスト：/\.css?$/、ローダー： '生-ローダー' }、{ テスト：/ \ .scss？$ /、 loader： 'raw-loader！csso-loader！sass' } – BriDev

答えて

関連する問題