1

入門ガイドには次のように記載されています。

プロジェクトに Kendo UI テーマを含める方法はいくつかあります。Webpack とその Sass ローダーをお勧めします。これにより、Sass 変数を使用して Kendo UI テーマをカスタマイズできます。

ただし、今はもっと簡単なことをしましょう。

では、Webpack と Sass を使用してより複雑なバージョンを作成するにはどうすればよいでしょうか?

4

2 に答える 2

2

アンギュラ CLI

新しいプロジェクトを開始する場合は、WebPack よりも Angular CLI をお勧めします。CLI はバックグラウンドで WebPack を使用するためです。インストールするには、次のコマンドを入力します。

npm install -g angular-cli

Angular CLI は、新しいコンポーネントなどを生成するための多くのヘルパー コマンドを提供します。コマンドの包括的なリストについては、GitHub ドキュメントを参照してください。

SASS を使用して新しいプロジェクトを作成するには、ターミナル/コマンド プロンプトで次のコマンドを使用します。

ng new myProjectName --style=sass

次に、css ファイルの代わりにコンポーネントから scss ファイルを参照するだけです。CLI がスタイルシートのコンパイルを処理します。

@Component({
    selector: 'my-custom-component',
    templateUrl: './my-custom.component.html',
    styleUrls: ['./my-custom.component.scss'], // Angular CLI knows this is a sass file and will preprocess it appropriately
})
export class MyCustomComponent {

}

スタイルシートにはスコープが設定されているため、セレクターdivを使用してスタイル ルールを記述できます。スタイル ルールは、このコンポーネント内の div にのみ適用されます (子孫にも適用されません)。コンポーネントの外部でスタイルを参照する場合は、Angular 2 のドキュメント にある特別なセレクター:host-context(.myClass)( またはなど) を使用し/deep/ます。

ウェブパック

Angular CLI なしで WebPack を使用する場合は、sass-loaderパッケージをインストールする必要があります。

npm install sass-loader --save-dev

次に、webpack.config 内でプラグインを構成する必要があります。config の module.loaders セクションに以下を追加します。

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
}

sass-loader プラグインの使用に関する完全なドキュメントは、sass-loader GitHub ページにあります。

于 2016-10-12T07:15:52.323 に答える
1

Kendo UI for Angular 2 コンポーネントのスタイリングに関するより詳細なガイドは、テーマのドキュメントにあります。Maloricによる一般的なアドバイスは引き続き適用されます。ng2-dashboard アプリ( scss、component、webpack.config )のコンポーネントを使用する実際のサンプルを確認できます。

于 2016-10-12T08:06:41.550 に答える