I am developing with rails6, but css is applied twice.
The hierarchical structure of folders is as follows.

  • app /assets /stylesheets /_common.css
  • app /assets /stylesheets /_icomoon.css
  • app /assets /stylesheets /_initialize.css
  • app /assets /stylesheets /application.scss
  • app /assets /stylesheets /Other .scss for each controller

Contents of 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 "initialize";
@import "icomoon";
@import "common";

Currently, when you check the three css of _common.css, _icomoon.css, initialize.css with the developer tool of the browser, it is in the state of being loaded twice on various pages.
Is it the only way to write the contents of the three css directly in application.scss?


I tried to delete the description of @import in application.scss because it is duplicated, but then it will not be read even once next time.

Desired state

I want to make the css loaded by

@import read only once on all pages.

  • Answer # 1

    require_tree @import
    I think it's because I'm writing both

    If you leave it to SCSS, only @import
    Only require_tree if you leave it to the Rails asset pipeline


    If you are using multiple Sass files, you should use the Sass @import rule instead of loading them with the Sprockets directive. If you use the Sprockets directive in such cases, the Sass file will be in its own scope and the variables and mixins defined in it will not be available to other Sasses.

    Since it says

    , it seems correct to just use @import.

    When I load all CSS with

    @import, I load unnecessary CSS on all pages. Is that unavoidable?

    Rails defaults to a mechanism called turbolinks, and in fact, all that looks like a separate page is just replacing the body with ajax from the same page.

    Therefore, there is an advantage that all JS and CSS used on all pages are put together in one file, and it is only read once and the header is not replaced at the time of page transition, so it is not acquired every time.

    However, if you use turbolinks, you may be addicted to not recognizing that the DOM is dynamically generated every time, or you can slow down the initial page display because it also loads all the CSS and JS of pages that you rarely access. You can also cut it because it has sex

    [Rails] How to disable turbolinks

    On top of that, you can limit the CSS and JS to be read by switching the entry file (file to be embedded in the view) for each controller.
    If you search, you will find some articles.
    Load css for each controller in Ruby on Rails

    When I load all CSS with @import, it loads unnecessary CSS on all pages. Is that unavoidable?

    Route2021-10-11 09:53:34