web-dev-qa-db-ja.com

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'(…)

これをどのように修正しますか？

javascriptcssangularsassangular-cli
89
Jamie

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

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

  1. 既存の.cssファイルの名前を.scssに変更します（例：styles.cssおよびapp/app.component.css）。

  2. CLIでstyles.scssを見つけます。

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

  1. 新しいスタイルファイルを見つけるようにコンポーネントを指定します。

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

将来のプロジェクトのために

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

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

将来作成するすべてのプロジェクトにデフォルトを設定したい場合は、次のコマンドを実行してください。

ng config --global defaults.styleExt=scss
185
Chic

Ng6以降では、これはルートレベルでangular.jsonに追加された以下のコードで達成できます。

.angular.jsonを手動で変更します。

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}
47
Jose Orihuela

angular.jsonファイルを開く

からの変更

"schematics": {}

に

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }
  1. から変更（2箇所）

"src/styles.css"

に

"src/styles.scss"

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

30
BALA

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

新しいプロジェクトを生成するときは、スタイルファイルにどの拡張子を付けるかを定義することもできます。

ng new sassy-project --style=sass

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

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

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

11
Angel Roma

Angular 6の場合、

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

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

11
Franklin Pious

使用コマンド：

ng config schematics.@schematics/angular:component.styleext scss
4
himanshu sharma

Ng6では、同様の 投稿 に従って、このコマンドを使う必要があります。

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

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

SCSSをNxワークスペースで機能させるためのコマンド。

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

3
tilo

強引な変更を適用することができます。これは変更するよう働きますが、より長いプロセスです。

アプリフォルダに移動します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の手順に従ってください。

0
Frank Thoeny