css - css から scss への Angular-cli

Question

ドキュメントを読みましたが、使用したい場合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'(…)

Answer 1

Angular 6 については、公式ドキュメントを確認してください

注:@angular/cliよりも古いバージョンの場合6.0.0-beta.6はng set、ng config.

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

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

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

Answer 2

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

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

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

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

Answer 3

Angular 11 以降の場合

手動で変更angular.json.

を交換してください"schematics": {},

と

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

Answer 4

このスレッドに遭遇したNrwl 拡張機能のユーザーの場合: すべてのコマンドは Nx (例: ng generate component myCompent) によってインターセプトされ、AngularCLI に渡されます。

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

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