Angular CLI で SASS を使ってコンポーネントをスタイリングする
Angular CLI SASS オプション詳細解説
SASS オプションの概要
Angular CLI で SASS を使用する主な方法は 2 つあります。
- プロジェクト作成時に SASS を指定する:
ng new my-app --style=sass
ng set defaults.styleExt scss
これらの方法のいずれかを選択すると、Angular CLI はプロジェクトに必要な SASS 関連のファイルと設定を自動的に追加します。
主要な SASS オプション
Angular CLI は、SASS のコンパイル方法を制御するためのいくつかのオプションを提供しています。
styleExt:
- デフォルトのスタイルファイル拡張子を指定します。
- 有効な値:
css,scss,sass - 例:
ng set defaults.styleExt scss
sassCompiler:
- 使用する SASS コンパイラを指定します。
- 有効な値:
node-sass,dart-sass
sourceMaps:
- SASS コンパイル時にソースマップを生成するかどうかを指定します。
- ソースマップは、デバッグ時に元の SASS ファイルを特定するのに役立ちます。
- 有効な値:
true,false
outputStyle:
- 生成される CSS のスタイルを指定します。
- 有効な値:
expanded,compressed expanded: 人間が読みやすい形式compressed: ファイルサイズを小さくするための圧縮形式
includePaths:
- SASS コンパイラがインポートできる追加のディレクトリを指定します。
- 例:
ng set defaults.includePaths ["node_modules/bootstrap/scss"]
- SASS コンパイラが処理しないファイルのパスを指定します。
オプションの詳細設定
上記のオプションに加えて、Angular CLI は SASS コンパイラに渡されるその他のオプションを設定することもできます。詳細については、Angular CLI のドキュメントを参照してください。
まとめ
Angular CLI は、SASS を使用した Angular アプリケーションの開発を効率化する強力なツールです。上記のオプションを理解することで、プロジェクトのニーズに合わせて SASS コンパイルプロセスをカスタマイズすることができます。
Angular CLI SASS サンプルコード
プロジェクト作成
ng new my-app --style=sass
このコマンドは、my-app という名前の新しい Angular アプリケーションを作成し、デフォルトのスタイルファイル拡張子を .scss に設定します。
コンポーネントの作成
ng generate component my-component
このコマンドは、my-component という名前の新しい Angular コンポーネントを作成します。
SASS ファイルの作成
my-component.component.scss という名前のファイルを作成し、以下のコードを追加します。
.my-component {
color: red;
font-size: 16px;
}
コンポーネントテンプレートの編集
<h1>My Component</h1>
<p class="my-component">This is my component.</p>
アプリケーションの実行
ng serve
このコマンドは、Angular アプリケーションをローカルサーバーで起動します。ブラウザで http://localhost:4200 を開き、アプリケーションを確認できます。
出力結果
ブラウザでアプリケーションを開くと、<h1> タグと <p> タグが赤色で、フォントサイズが 16px になっていることを確認できます。
上記のサンプルコードは、Angular CLI で SASS を使用するための基本的な方法を示しています。詳細については、Angular CLI のドキュメントと SASS のドキュメントを参照してください。
Angular CLI で SASS を使用するその他の方法
@import ルールを使用して、別の SASS ファイルを現在の SASS ファイルにインポートできます。これは、コードを分割して再利用する場合に便利です。
例:
@import 'my-styles.scss';
.my-component {
color: red;
font-size: 16px;
}
$primary-color: red;
.my-class {
color: $primary-color;
}
上記のコードは、my-styles.scss ファイルから $primary-color 変数と .my-class ミックスインをインポートします。
SASS 変数を設定する
ng set コマンドを使用して、SASS コンパイラに渡される変数を設定できます。
ng set sass.includePaths ["node_modules/bootstrap/scss"]
このコマンドは、SASS コンパイラが node_modules/bootstrap/scss ディレクトリ内のファイルをインポートできるようにします。
SASS コンパイラのオプションを設定する
ng set sass.outputStyle compressed
このコマンドは、SASS コンパイラによって生成される CSS ファイルを圧縮します。
PostCSS は、CSS を処理して変換するためのツールです。Angular CLI は PostCSS を組み込みでサポートしており、SASS ファイルを処理するために使用できます。
ng set postcss.plugins ["autoprefixer"]
このコマンドは、Autoprefixer プラグインを PostCSS に追加し、ベンダープレフィックスを自動的に生成します。
angular sass angular-cli
