CSSが二重に読み込まれてしまっている状態の解決

下記のようにcssが重複している状態の際の、解決方法をメモ。

原因はapplication.scssの記述によるもの。

/*
 * 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
 */
 @import "reset";
 @import "scaffolds";
 @import  "items";

Railsにおいて、CSSファイルが読み込まれている理由は、
application.cssファイルに *= require_tree .というコードが、コメントアウトで
記述されているためである。

そのため、SCSSを記載する際に@importを記載すると二重になってしまっていた。
そのため、

 @import "reset";
 @import "scaffolds";
 @import  "items";

この必要なscssの記載のみにすることで回避できました。

上記の違いについては、下記記事が参考になります。

▼requireと@importのそれぞれの仕組みの違い
https://qiita.com/okamoto_ryo/items/1ceaf4ebca2ae3c256bc