We are developing with rails6, but css is applied in double.
The hierarchical structure of the folder is as follows:
Application.scss Contents
/*
* 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 with this directory, lib/assets/style sheets, or any plugin's
* vendor/assets/stylesheets directory can be referred to 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 bottom of the
* compiled files 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 generically better to create a new file per style scope.
*
*= require_tree.
*= require_self
*/
@import "initialize";
@import "icoon";
@import "common";
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?Tried
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
require_tree@import
I think it's because I'm writing both
Only @import
if you want to leave it to SCSS
Require_tree only
If you are using more than one Sass file, you must use the Sass@import 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.
[Rails] How to disable turbolinks
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
© 2024 OneMinuteCode. All rights reserved.