How can i include only custom css and js files in rails application


Tags: css,ruby-on-rails

Problem :

Here i am trying to include my custom js and css files in my rails application. i am a newbie to rails.. right now my application is linked to all the js and css files that i have in assets directory...

but i don't need them. i need to add only my js files.... how can i add it in to my rails application.... can i add it through layout file?

here is my layout file

<!DOCTYPE html>
<html>
<head>
  <title>Walden</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>  
  <%= csrf_meta_tags %>
</head>
<body>
<%= render 'shared/navbar' %>
<%= yield %>
</body>
</html>

right now it is linked to all css and js files like this.

<link data-turbolinks-track="true" href="/assets/user_details.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/alert.js?body=1"></script>

example: i need to add only juery.js file and user_details.css file...how to add it?



Solution :

Well, you have two basic choices:

Remove the extraneous files from your application.js and application.css.

or

<%= stylesheet_link_tag    'user_details', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'jquery', 'data-turbolinks-track' => true %>

http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/javascript_include_tag

http://apidock.com/rails/v4.2.1/ActionView/Helpers/AssetTagHelper/stylesheet_link_tag


    CSS Howto..

    How to add an icon to a button at the bottom right corner

    Selenium: How to get text from within an html tag which has another tag in it

    How to float menu list elements

    How to make my PHP code, display in html table?

    css how to make this div at the bottom of another div [duplicate]

    How can I slide an element hidden by external CSS with Scriptaculous?

    How to override a property set in an id (CSS)

    How to style unordered lists in CSS as comma separated text

    div height is not showing properly

    How to style a div to be a responsive square? [duplicate]

    CSS - HTML how to make the anchor image go to a specific spot

    How to make a shrink-to-fit container with max-height and scrollbars in the content area?

    How do you disable the set width of parent element for child element?

    bootstrap collapse to show a div it work but how to make it didn't affect side items?

    CSS html : non-standard picture frame: how to imlement with CSS and HTML?

    How to get all blue background divs to align to the left and get all the red divs to align to the right using the css float property?

    css resize: How to resize a dynamic growing div after max height is active

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    How to change css file for this aim?

    How to use div to emulate border for