Angular CLIのSASSオプションについて (日本語)

Angular CLIは、Angularアプリケーションの開発を効率化するためのコマンドラインインターフェースです。その中で、SASS (Syntactically Awesome Stylesheets)のサポートも提供しています。

Angular CLIでのSASSのデフォルト設定

• SASSのコンパイラ
  node-sass (または dart-sass)
• SASSのローダー
  sass-loader
• SCSSファイルの拡張子
  .scss

SASSオプションは、angular.jsonファイルのプロジェクト設定内で指定します。

例

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss"
            ],
            "sassOptions": {
              "includePaths": [
                "src/styles"
              ]
            }
          }
        }
      }
    }
  }
}

この例では、sassOptionsオブジェクトを使用して、SASSのコンパイラに渡すオプションを指定しています。

よく使われるSASSオプション

• sourceMap
  ソースマップを生成するかどうかを指定します。
• outputStyle
  CSSの出力スタイルを指定します (nested, expanded, compact, compressed)。
• precision
  小数点以下の桁数を指定します。
• includePaths
  SASSファイルからインポートするファイルのパスを指定します。

"sassOptions": {
  "includePaths": ["node_modules"],
  "precision": 8,
  "outputStyle": "expanded",
  "sourceMap": true
}

さらに詳しい情報

Angular CLIのドキュメントを参照すると、より詳細なSASSオプションと使い方を知ることができます。

angular.jsonファイルでのSASSオプションの設定

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss"
            ],
            "sassOptions": {
              "includePaths": [
                "src/styles"
              ],
              "precision": 8,
              "outputStyle": "expanded",
              "sourceMap": true
            }
          }
        }
      }
    }
  }
}

• outputStyle
  CSSの出力スタイルをexpandedに設定します。
• includePaths
  src/stylesディレクトリを指定することで、その中のSASSファイルからインポートできるようになります。

SASSファイルでのインポートと使用

// src/styles.scss
@import "variables";
@import "mixins";

body {
  background-color: $primary-color;
  @include rounded(10px);
}

• @include rounded(10px);は、mixinsファイルで定義されたroundedミックスインを使用しています。
• variablesとmixinsは、他のSASSファイルで定義された変数やミックスインをインポートしています。

SASSファイルでの変数とミックスインの定義

// src/styles/variables.scss
$primary-color: #007bff;

// src/styles/mixins.scss
@mixin rounded($radius) {
  border-radius: $radius;
}

• mixins.scssでミックスインを定義しています。
• variables.scssで変数を定義しています。

Angularコンポーネントでのスタイルの適用

// src/app/app.component.scss
.app {
  font-family: Roboto, sans-serif;
}

• コンポーネントのテンプレートファイルに関連するスタイルを定義します。

Webpackのカスタムローダー

• 例
  

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                // SASSオプションを設定
              }
            }
          ]
        }
      ]
    }
  };
  

• 方法
  Webpackのカスタムローダーを作成し、angular.jsonファイルで設定します。
• 利点
  最も柔軟な方法でSASSを処理できます。

ng-cli-webpack

• 例
  

  // angular.json
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        // ...
        "webpackConfig": "./webpack.config.js"
      }
    }
  }
  

• 方法
  ng-cli-webpackプラグインをインストールし、angular.jsonファイルで設定します。
• 利点
  Angular CLIの機能を維持しながら、Webpackのカスタマイズが可能になります。

SASSのプレプロセッサ

• 例
  

  # package.json
  "scripts": {
    "build": "sass src/styles.scss dist/styles.css"
  }
  

• 方法
  SASSのプレプロセッサ（Dart Sass、node-sass）を直接使用し、ビルドスクリプトで設定します。
• 利点
  SASSの機能を拡張できます。

CSS Modules

• 例
  

  // src/app/app.component.scss
  :local(.app) {
    // コンポーネント固有のスタイル
  }
  

• 方法
  Angular CLIのCSS Modules機能を使用し、コンポーネントのスタイルファイルでモジュールを有効にします。
• 利点
  CSSのスコープを限定し、名前衝突を防止できます。