We are developing with rails6, but css is applied in double.
The hierarchical structure of the folder is as follows:
Currently, when I checked the browser's developer tool for _common.css, _icomoon.css, and initialize.css, it is double loaded on various pages.
Is there no other way but to describe the contents of the three csss directly in application.scss?
I deleted the description of @import in application.scss because it is duplicated, but then it will never load again.
I would like to have the css loaded in @import read only once on all pages.ruby-on-rails ruby css scss
I think it's because I'm writing both
if you want to leave it to SCSS Require_tree only
If you are using more than one Sass file, you must use the [email protected] rule without loading it in the Sprockets directive.If you use the Sprockets directive in these cases, the Pass file is placed in your own scope, and the variables and mix-ins defined in it are no longer available to other Passes.
As it says, it seems that it is correct to choose only @import
If I read all the CSSs in @import, I will read all the unnecessary CSSs on all the pages, but is that unavoidable?
For Rails, the system called turbolinks is the default, and the only thing that looks like a different page is to replace the body with ajax from the same page.
Turbolinks operating principles
Therefore, the advantage is that you put all the JS and CSS used on all pages into one file, and you don't change the header when you transition pages, so you don't get it every time.
However, if you don't recognize that DOM is dynamically generated every time you use turbolinks, you may fall in love with it, or you can read all the CSSs and JS pages that you rarely access, so you can turn them off because the first page display may be slow.
You can then switch between entry files (files embedded in the view) for each controller to limit the CSS and JS to load.
If you search for it, you'll find some articles.
Read css per controller in Ruby on Rails
© 2022 OneMinuteCode. All rights reserved.