SprocketsはRailsで利用されてきたフロントエンドで利用するパッケージングシステムです。 Rails 6.0でもCSSはSprocketsを利用してソースコードのコンパイルや縮小・圧縮を行います。
Railsがデフォルトで使用するCSS拡張言語はSCSSです。Sassを使うことでSCSS形式とSass形式2種類の記述形式をコンパイルしてCSSへ変換します。
Sprocketsを使うことで、Webアプリケーションを運用する上で効率的な形へ変換する処理を行います。**コンパイルする際はファイルの拡張子から必要なコンパイラを判定します。**また複数の拡張子を重ねることで複数のコンパイルを重ねることも可能です。
rails newするとapp/assets/stylesheets/application.cssというファイルが生成されています。このファイルはCSSファイルのエントリーポイントとなるファイルで、生成された他のファイルを読み込む設定などが書かれています。
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
*=で始まる行はSprocketsが解釈するための特別なディレククティブです。読み込むCSSファイルを指定しています。記述する順番通りにファイルの読み込みを行います。
require_tree .は引数で指定したディレクトリやそのディレクトリ配下のSCSSやCSSファイルの読み込みを行います。app/assets/stylesheets以下の全CSSファイルを読み込むという意味になります。
require_selfは自身のファイル内に記述されたCSSの内容を読み込みます。application.css自体を最終的なスタイルシートに含めることを指定しています。
RailsでCSSの読み込む順番を制御する方法 - Qiita
/commentsにアクセスした時のソースをみてみると、.debugが付与されたファイル名がリンクされています。.debug付きのファイルは各ファイルを統合し、SourceMapの情報を付与したファイルです。
SourceMapとは、コンパイル前とコンパイル後の対応関係を記したファイルのことです。
application.html.erbファイルの中で下記の記述があります。