

rails6で開発を行っていますが、cssが２重で適用されてしまいます。  
フォルダの階層構造は以下の様になっています。

  * app/assets/stylesheets/_common.css
  * app/assets/stylesheets/_icomoon.css
  * app/assets/stylesheets/_initialize.css
  * app/assets/stylesheets/application.scss
  * app/assets/stylesheets/その他各コントローラー向け.scss

application.scssの中身

[code]

    /*
     * 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 "initialize";
    @import "icomoon";
    @import "common";
    
[/code]

現在_common.css、_icomoon.css、initialize.cssの３つのcssがブラウザのデベロッパーツールで確認すると、色々なページで２重に読み込まれている状態になっています。  
application.scssに直接3つのcssの中身を記述するしか方法はなさそうでしょうか？

### 試したこと

２重になっているということでapplication.scssの中の@importの記述を削除してみましたが、そうすると次は１回も読み込まれない状態になってしまいます。

### 希望する状態

@importで読み込んでいるcssを全てのページで１回だけ読み込んでる状態にしたいです。


CC BY-SA 4.0
2021-10-04T04:45:30.137
82863
2021-10-06T05:27:55.140
2021-10-04T05:00:04.000
44197
44197
question
ruby-on-rails ruby css scss
rails6リセットcssなどが２重に読み込まれてしまう


require_tree @import  
両方書いてるからだと思います

SCSSに任せるなら @import のみ  
Rails のアセットパイプラインに任せるなら require_tree のみ

[Rails
ガイド](https://railsguides.jp/asset_pipeline.html#%E3%83%9E%E3%83%8B%E3%83%95%E3%82%A7%E3%82%B9%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A8%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96)では

> Sassファイルを複数使用しているのであれば、Sprocketsディレクティブで読み込まずにSass
> @importルールを使用する必要があります。このような場合にSprocketsディレクティブを使用してしまうと、Sassファイルが自分自身のスコープに置かれるため、その中で定義されている変数やミックスインが他のSassから利用できなくなってしまいます。

とあるので @import だけにするのが正解っぽいですね

* * *

> @importで全てのCSSを読み込むと、全てのページで不要なCSSまで読み込んでしまうのですがそれはしょうがないのでしょうか？

Rails は turbolinks という仕組みがデフォルトであって、実は別ページにみえるのも全部同じページから ajax で body
だけをいれかえてるだけなんですよね  
[Turbolinksの動作原理](https://railsguides.jp/working_with_javascript_in_rails.html#turbolinks%E3%81%AE%E5%8B%95%E4%BD%9C%E5%8E%9F%E7%90%86)

そのため全ページで使用するJSやCSSを全部１ファイルにまとめてしまって、１度読み込むだけでページ遷移時に header
をいれかえないことで毎回取得しないというメリットがあります

ただ turbolinks
を使うとDOMが毎回動的生成されることを認識してないとハマるケースもあったり、めったにアクセスしないようなページのCSSやJSも全部読み込むので初回ページ表示が遅くなる可能性もあるので切ることもできます

[【Rails】turbolinksを無効化する方法](https://qiita.com/matsubishi5/items/c4c8a5df03ae630ae534)

その上でコントローラごとにエントリファイル(ビューに埋め込むファイル)を切り替えれば読み込むCSSやJSを制限できます  
検索すればいくつか記事が出てくるかと思います  
[Ruby on Rails で
controllerごとにcssの読み込みを行う](https://qiita.com/Tomoyuki_Yamada/items/458f02c4cf735c8ed9c6)


CC BY-SA 4.0
2021-10-04T05:17:24.047
82864
2021-10-06T05:27:55.140
2021-10-06T05:27:55.140
82863
answer