ホームページ  >  記事  >  ウェブフロントエンド  >  Angular プロジェクトで .css ファイルを .scss ファイルに変更する方法について話しましょう

Angular プロジェクトで .css ファイルを .scss ファイルに変更する方法について話しましょう

青灯夜游
青灯夜游転載
2021-07-15 18:31:071980ブラウズ

この記事について話しましょうAngular プロジェクトを初期化した後、デフォルトの .css ファイルを .scss ファイルに変更するにはどうすればよいですか?加工方法を紹介します。一定の参考値があるので、困っている友達は参考にしていただければ幸いです。

Angular プロジェクトで .css ファイルを .scss ファイルに変更する方法について話しましょう

[関連チュートリアルの推奨事項: "angular チュートリアル"]

質問: 下の図は、初期化後のプロジェクトです。プロジェクト内のスタイル ファイルは .css ファイルです。.css を .scss に変更したい場合はどうすればよいですか?

Angular プロジェクトで .css ファイルを .scss ファイルに変更する方法について話しましょう

解決策: 次のコマンドを実行します:

find . -name "*.css" -exec bash -c 'mv "$1" "${1%.css}".scss' - '{}' \;

その後、.css ファイルが以前参照されていた場所が現在参照されているため、コンソールにエラーが表示されます。 .scss ファイルになる場合は、参照を変更する必要があります。

Angular プロジェクトで .css ファイルを .scss ファイルに変更する方法について話しましょう

2 つの変更があります。

1 はビジネス コンポーネントです。

2 はプロジェクト構成ファイルです。

ビジネス コンポーネントとは、元の参照を .css に拡張子を付けて .scss に変更することを意味します。例:

Angular プロジェクトで .css ファイルを .scss ファイルに変更する方法について話しましょう

プロジェクト構成情報。つまり、angular.json で次のように変更します。

Angular プロジェクトで .css ファイルを .scss ファイルに変更する方法について話しましょう

この後変更すると、いくつかのコンソール エラー レポートが解決されます。まだエラーがある場合:

Angular プロジェクトで .css ファイルを .scss ファイルに変更する方法について話しましょう

# この種のエラーが発生した場合は、プロジェクトを停止し、プロジェクトを再実行します:

Angular プロジェクトで .css ファイルを .scss ファイルに変更する方法について話しましょう

これで、現在のプロジェクトの .css から .scss への変換が完了しました。

注意すべき点が 1 つあります。これは作成されたばかりのプロジェクトであり、多数のサードパーティ ライブラリが導入される前の段階にあります。フォント ライブラリやスタイルに関連する可能性のあるその他のライブラリなど、多数のサードパーティ ライブラリが導入されている場合、この方法には特定の制限があり、さらなる修正が必要になる場合があります。この記事で引用されている参考記事を参照してください。

参考: https://lanxuexing.github.io/2019/09/26/ng-scss-maigrate/

概要: これは昨日後半に宣言したルーティング ファイルと同じです。実際、プロジェクトの初期化時にこれらすべてを記述することができます。

    1 つは、プロジェクトの初期化時にルーティング ファイルを作成することです。
  • もう 1 つは、プロジェクトの初期化時に、プロジェクトで使用するスタイル ファイルの形式を設定することです。 .css または .scss です。
#この記事は、https://juejin.cn/post/6934947164162359304

から転載されています。プログラミング関連の知識の詳細については、次のサイトを参照してください。
プログラミング入門

! !

以上がAngular プロジェクトで .css ファイルを .scss ファイルに変更する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事は掘金--陆枫Larryで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。