cssからscssへのAngular CLI

ドキュメントを読みました。使用したい場合はscss、次のコマンドを実行する必要があります。

ng set defaults.styleExt scss

しかし、それを実行してそのファイルを作成しても、コンソールにこのエラーが表示されます。

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)

Angular 6の公式ドキュメントを確認してください

注：については@angular/cliより古いバージョンの6.0.0-beta.6使用ng setの代わりにng config。

既存のプロジェクトの場合

デフォルトのcssスタイルでセットアップされた既存のangular-cliプロジェクトでは、いくつかのことを行う必要があります。

1. デフォルトのスタイル拡張子を scss

.angular-cli.json（Angular 5.x以前）またはangular.json（Angular 6+）を手動で変更するか、以下を実行します。

ng config defaults.styleExt=scss

エラーが発生した場合：次Value cannot be found.のコマンドを使用します。

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

（*出典：Angular CLI SASSオプション）

2. 既存の.cssファイルの名前を.scss（たとえば、styles.cssおよびapp / app.component.css）に変更します。

3. CLIでstyles.scssを見つけます

手動でファイルの拡張子変更apps[0].stylesでをangular.json

4. コンポーネントをポイントして、新しいスタイルファイルを見つけます。

styleUrlsコンポーネントのを新しいファイル名と一致するように変更します

今後のプロジェクトのために

@Serginhoが述べたように、ng newコマンドの実行時にスタイル拡張を設定できます

ng new your-project-name --style=scss

今後作成するすべてのプロジェクトにデフォルトを設定する場合は、次のコマンドを実行します。

ng config --global defaults.styleExt=scss

ng6以降、これangular.jsonはルートレベルで追加された次のコードで実行できます。

手動で変更.angular.json：

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

angular.jsonファイルを開く

1.からの変更

"schematics": {}

に

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

2. からの変更（2か所）

"src/styles.css"

に

"src/styles.scss"

次に、すべての.cssファイルを確認して名前を変更し、component.tsファイルのstyleUrlsを更新します.css to .scss

Angular 6の場合

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

注：@ schematics / angularは、Angular CLIのデフォルトの回路図です

Angular CLIのCSSプリプロセッサー統合：6.0.3

新しいプロジェクトを生成するときに、スタイルファイルに必要な拡張子を定義することもできます。

ng new sassy-project --style=sass

または、既存のプロジェクトにデフォルトのスタイルを設定します。

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

すべての主要なCSSプリプロセッサのAngular CLIドキュメント

既存のプロジェクトの場合：

ではangular.json、ファイル

1. ではbuild部分とにtest一部、交換してください：

   "styles": ["src/styles.css"], 沿って "styles": ["src/styles.scss"],

2. 交換：

   "schematics": {}, 沿って "schematics": { "@schematics/angular:component": { "style": "scss" } },

ng config schematics.@schematics/angular:component.styleext scssコマンドを使用しても機能しますが、構成が同じ場所に配置されません。

プロジェクトで、.cssファイルの名前をに変更します.scss

新しいプロジェクトの場合、このコマンドはすべての作業を行います。

ng n project-name --style=scss

グローバル構成の場合

新しいバージョンにはグローバルコマンドがないようです

コマンドを使用：

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

同様の投稿によると、ng6ではこのコマンドを使用する必要があります：

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

このスレッドに出くわすNrwl拡張機能のユーザーの場合：すべてのコマンドはNxによってインターセプトされます（たとえば、ng generate component myCompent：）れ、AngularCLIに渡されます。

NxワークスペースでSCSSを機能させるコマンド：

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

力ずくの変更が適用できます。 これは変更しても機能しますが、プロセスは長くなります。

appフォルダーsrc / appに移動します

1. このファイルを開きます：app.component.ts

2. このコードstyleUrls: ['./app.component.css']をstyleUrls: ['./app.component.scss']

3. 保存して閉じます。

同じフォルダーsrc / app

1. app.component.cssファイルの拡張子の名前を（app.component.scss）に変更します。

2. 他のすべてのコンポーネントについて、この変更に従います。（例：自宅、概要、連絡先など）

angular.jsonの設定ファイルは、次です。プロジェクトのルートにあります。

1. cssを検索して置き換え、それを（scss）に変更します。

2. 保存して閉じます。

最後に、を再起動しますng serve -o。

コンパイラーが不平を言った場合は、手順をもう一度やり直してください。

app / srcの手順に厳密に従ってください。

Angular（v9）の最新バージョンでは、以下のコードを追加する必要があります angular.json

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

次のコマンドを使用して追加できます。

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