Angular-CLI プロジェクトを CSS から SCSS に変換するにはどうすればよいですか?

Angular-CLI プロジェクトを CSS から SCSS に変換する

Angular-CLI プロジェクトで SCSS を使用しようとすると、エラーが発生する場合がありますstyle.css ファイルが存在しないことについて。このエラーは、ng setdefaults.styleExt scss コマンドを使用してデフォルトのスタイル拡張子を SCSS に設定しているにもかかわらず発生します。

解決策:

この問題を解決するには、次の手順に従います。 :

既存のプロジェクトの場合 (以前の Angular CLI バージョン) 6):

1. デフォルトのスタイル拡張子を SCSS に変更します:

   • .angular-cli.json ファイルを手動で編集し、css を scss に置き換えます。

   • または、次のコマンドを実行します。コマンド:

     ng config defaults.styleExt=scss

     ログイン後にコピー

2. 既存の CSS ファイルを SCSS に変換:

   • 既存の .css ファイルをすべて .scss に名前変更します。 styles.css.

3. ビルド構成を調整します:

   • .angular-cli.json の apps[0].styles プロパティを編集します。ファイルを作成し、.css 拡張子を次のように置き換えます。 .scss.

4. コンポーネント スタイルの更新:

   • 新しい .scss ファイルを指すようにコンポーネント ファイル内の styleUrls 配列を変更します。

について既存のプロジェクト (Angular CLI バージョン 6 ):

上記と同じ手順を使用して、.angular-cli.json の代わりに angular.json ファイルを編集します。さらに、「値が見つかりません」エラーが発生した場合は、次のコマンドを実行します:

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

新しいプロジェクトの場合:

1. 新規作成時にスタイル拡張子として SCSS を指定します。プロジェクト:

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

   ログイン後にコピー

2. 将来のすべてのプロジェクトのデフォルトとして SCSS を設定します (オプション):

   ng config --global defaults.styleExt=scss

   ログイン後にコピー

次の手順に従って、これで、SCSS を使用するように Angular-CLI プロジェクトが正常に構成されます。

以上がAngular-CLI プロジェクトを CSS から SCSS に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。