Novice on the road, if there are any mistakes, please remind me in time
Analysis of CSS and JS Reference Relations in Rails
I. Rails Static File Storage Location
You can put it in three places: app / assets, lib/assets, or vendor/assets. At present, app/assets directory is mainly used.
- app/assets: Stores static resources of programs, such as images, JavaScript and CSS;
- lib/assets: store your own code base, or share the static resources of the code base;
- vendor/assets: Store third-party static resources, such as JavaScript plug-ins or CSS frameworks;
2. CSS Reference in Rails
The code that html.erb loads the CSS file is this sentence
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Among them,'data-turbolinks-track':'reload'means automatically loading new versions of files, using caching without new versions.
Application is the loading target: app/assets/stylesheets/application.scss
Look at what's in application.scss and how it works:
* *= Requ_tree. Introduce the css file under the current directory tree *= Requ_self introduces the current file (that is, the following three lines of import) */ @import "bootstrap-sprockets"; @import "bootstrap"; @import "font-awesome";
CONCLUSION: The stylesheet_link_tag'application'in the html.erb file actually refers to all the css files under app/assets/stylesheets/.
The effect of generating html for web pages is as follows (a long string of scrambling codes is automatically generated version validation codes for files):
<link rel="stylesheet" media="all" href="/assets/account/orders.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/admin/orders.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/admin/products.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/cart_items.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/carts.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/layout_min.self-0922e518b4cea83b62a086f1e87995c76bec4445e7b10033edd77073ec5f23a3.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/normalize.self-0417591869b6d8f7ce4deaae0ff36b6d2e98bb5f109ae79ba6515ce27ca44fa8.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/orders.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/products.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/welcome.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/application.self-8ef71f73b7cfab3a77b0f7944cda783a4e4d443e777d10cd50cc159b22db8c8a.css?body=1" data-turbolinks-track="reload" />
3. JS reference in Rails is similar to CSS
html.erb file
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Application is the loading target: app/assets/javascripts/application.js
The application.js file is as follows
//= require jquery //= require jquery_ujs //= require turbolinks //= Requ_tree. Introduce the js file in the current directory tree //= require bootstrap/dropdown //= require bootstrap/alert
Generate web html effect:
<script src="/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/account/orders.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/admin/orders.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/admin/products.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/action_cable.self-1641ec3e8ea24ed63601e86efcca7f9266e09f390e82199d56aa7e4bd50e1aa9.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/cable.self-6e0514260c1aa76eaf252412ce74e63f68819fd19bf740595f592c5ba4c36537.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/cart_items.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/carts.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/orders.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/products.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/welcome.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/dropdown.self-561cca1cbaf67474e01e9536f106bad541594860a6df997004591c1c1957a147.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/alert.self-742145c5bb847aafdadc6e339be795628f8bc25f177e851f03a8c42278eb0312.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/application.self-9b9be17d3c356f1a9a23b03b3b5d01bb4e46845459cc7ac189cd20f571fefb23.js?body=1" data-turbolinks-track="reload"></script>
Fourthly, all the css and js files of application are referenced by default, so how to specify how to load some css and js file sets for a web page?
If you need to introduce a CSS file set add_css, a JS file set add_js [single file, file set is the same thing]
Step 1: Create app/assets/javascripts/add_js.js and app/assets/stylesheets/add_css.scss files, respectively
The second step is to imitate the corresponding application.xxx file and introduce other js and css files to form a collection.
Step 3: Make the collection valid and referenceable
Modify the config/initializers/assets.rb file
# Be sure to restart your server when you modify this file. # Version of your assets, change this if you want to expire all your assets. Rails.application.config.assets.version = '1.0' # Add additional assets to the asset load path # Rails.application.config.assets.paths << Emoji.images_path # Precompile additional assets. # application.js, application.css, and all non-JS/CSS in app/assets folder are already added. # Rails.application.config.assets.precompile += %w( search.js ) "This location adds what you need to customize js,css Collecting information, application.js, application.css Is added by default" Rails.application.config.assets.precompile += %w( add_css.css ) Rails.application.config.assets.precompile += %w( add_js.js )
Step 4: Refer to js, css in html.erb
<%= stylesheet_link_tag 'add_css', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'add_js', 'data-turbolinks-track': 'reload' %>
Effect
<link rel="stylesheet" media="all" href="/assets/carts.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/orders.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/add_css.self-9da70418572a71afc8af4a47ad2127583ae7f407b7ae0fb1d3a41d17b8fc97b0.css?body=1" data-turbolinks-track="reload" /> <script src="/assets/cart_items.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/add_js.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1" data-turbolinks-track="reload"></script>
Asset Pipeline in Rails
Asset Pipeline functionality depends on gem
gem 'sass-rails' gem 'uglifier' gem 'coffee-rails'
For more details, the article is about rails 4, not the latest