web-dev-qa-db-ja.com

Angularにcssとscssの両方を含めることは可能ですか？

.scss（SASS）を使用するスタンドアロンビルドモジュールを既存のAngularアプリにプレーンCSSで設定しました。これらを互いに隣接させて実行することは可能ですか？たとえば、angular-cli.json defaultsセクションのカスタム構成が必要です。

"defaults": {
  "styleExt": "css? scss?"
}

または、2つのうち1つだけを使用することは可能ですか？

cssangularsassangular-cli
10
Bernoulli IT

Angular 6 +の編集

AngularのGitHubページにあります ：

stylePreprocessorOptionsは引き続きサポートされます。ただし、新しく生成されたangular.jsonを手動で更新する必要があります。その新しい場所は、jsonの「オプション」ブロック内にあります。

設定例は次のようになります。

"options": {
    "outputPath": "../webapp",
    "index": "src/index.html",
    "main": "src/main.ts",
    "tsConfig": "src/tsconfig.app.json",
    "polyfills": "src/polyfills.ts",
    "assets": [
        {
            "glob": "**/*",
            "input": "src/resources",
            "output": "/resources"
        },
    ],
    "styles": [
        "src/styles.scss"
    ],
    "stylePreprocessorOptions": {
        "includePaths": [
            "src/styles"
        ]
    },
    "scripts": []
}

変更されたパスに注意してください。

元の回答

実際、"styleExt"を"css"に設定することで、すぐに使用できるようになりました。特定のモジュールの多数のコンポーネントがSASSを使用していました。変数とミックスインを含むsassフォルダがあり、これらのscssファイルを正しくコンパイル/処理するには、angular-cli.jsonのこの設定が必要でした：

"stylePreprocessorOptions": {
  "includePaths": [
    "sass"
  ]
}

アプリケーションは、cssファイルとscssファイルを組み合わせてうまくレンダリングします。このstyleExtパラメータは、css, scss, lessコマンドを使用してコンポーネントを追加するときに、デフォルトのコンポーネントスタイル（angular-cli）ファイルを生成するためにあると思います。

6
Bernoulli IT

両方を使用できますが、スタイル拡張をSASSまたはCSSのみに設定する必要があります。

コンポーネントでCSSまたはSASSを使用する場合は、Angular CLIを使用して、次のようなコンポーネントを生成します

CSSの場合

ng g component my-component --style=css

SASSの場合

ng g component my-component --style=sass

したがって、スタイル拡張をSASSに設定し、プロジェクトでもCSS拡張を使用します

5
Suhel Khan

Scssはcssのスーパーセットであるため、styleExtをscssに、cssファイルをscssに変更することをお勧めします。

2
Mike Tung