web-dev-qa-db-ja.com

どのようにしてSassコンパイルを追加しますか？ Angular CLI 6：angular.json？

新しいAngular CLI 6.0を使用して新しいAngularプロジェクトを作成しましたが、Sassコンパイルを自分のプロジェクトに追加する必要があります。プロジェクトを作成するときにフラグを立てることができますが、私のプロジェクトは既に作成されていて作業は完了しています。

新しいAngular CLIで生成された新しい設定ファイルは、angular.jsonではなくangular-cli.jsonと呼ばれるようになりました。ファイルのスキームも異なり、新しいプロパティがあります。

古いangular-cli.jsonにはstylExtを設定できるセクションがあります、

"defaults": {
    "styleExt": "scss"
}

しかし、"test"および"lint"プロパティの後に次のようなlintエラーが発生するため、正確にどこに配置すればよいかわかりません。

Matches multiple schemas when only one must validate.

そして建物は作り出します：

Schema validation failed with the following errors: Data path "['defaults']" should NOT have additional properties(styleExt).

CLIのドキュメントを見る"styleExt"を置く場所を示すようなものは何も見当たりません。

私は他の答えが忠告しているのを見ました：ng set defaults.styleExt scssこれはget/set have been deprecated in favor of the config command.を投げます。

私はng config set defaults.styleExt scssとnpm config set defaults.styleExt scssを試しました。前者はエラーを投げ、後者は明らかにファイルに影響を与えませんが、エラーはありませんでした。

angularnpmsassangular-cli
65
Esten

Smokey Dawsonがコメントした 、

"projects": {
  "angular-app": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {
      "@schematics/angular:component": {
        "styleext": "scss"
      }
    },
    "architect": {...}
  }
}

以上が結果です。そのため、アプリのキーschematicsの下に、キーstyleextをscssに設定してキー@schematics/angular:componentを追加します。

これは、プロジェクトのルートディレクトリにあるangular.jsonファイルに適用する必要があります。

102
Dico

Angular 6では、それよりも簡単です。コンパイルは自動的に処理されます。どうですか？コンポーネントレベルで scss を使用するには、ファイルに scss という拡張子を付ける必要があります（ less、styl も同じ）。そしてあなたの component.ts では、対応するスタイルを scss に変更します。

これはdocからのスクリーンショットです： enter image description here

そして、Scssをグローバルスケール（src/styles.css）で使うためには、styles.cssをstyles.scssに変更する必要があります（以下同様、style ...など）。その後、angular.jsonに進み、古いstyles.cssを新しいstyles.scss値に変更します。下の画像に示すように：

enter image description here

ここに彼ら自身を探検したいもののための最初の部分のためのドキュメントのためのリンク： https://angular.io/guide/component-styles#non-css-style-files

それでは、ng-cliのセットアップについてはどうでしょう。新しいコンポーネントを生成するときの拡張子はデフォルトのscssになります。 次のようにng configコマンドを使用します。

 ng config schematics.@schematics/angular:component.styleext scss

それはangular.jsonを次のように更新します。

"schematics": {
    "@schematics/angular:component": {
        "styleext": "scss"
    }
}

これは、以前のangular-cli.jsonと同等です。

    defaults: {
        "styleext": "scss"
    }

これは既に開始されているがデフォルトのscssに設定されていないプロジェクトのためのものです。新しいプロジェクトを作成している場合は、オプション--styleを使用してそれを次のように指定します。

ng new my-project --style=scss

そして、あなたは私たちがangular.jsonファイルの指定されたフィールドを更新することを可能にするconfigコマンドである前のコマンドを使う必要はないでしょう（それは既に設定されているので）。

48
Mohamed Allal