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 make a div 100% width minus a certain amount?

    How to make an element match the height of a dynamic page

    How do i set the relative path and folder paths in HTML and CSS from VS 2012?

    How to avoid overlapping HTML tags to highlight text

    How to create a scrollable Div Tag Vertically?

    How to remove
     tag

    How to change css of element using jquery

    How to get GWT console/development mode to generate css errors?

    How to change css position left to right using jquery?

    How hard is it to make an expanding tab in CSS?

    How do I get this div to be positioned below this search form?

    html-css-how to make opeanable vertical menu [closed]

    CSS - How do I get my list element to fill 100% of the block

    How to hide Fileupload with simple span by using css

    How can I allign select menu with a button on the same line with css bootstrap?

    How to target last 3 elements in a container using CSS :nth-last-child(n)?

    ASP.NET - IIS 7 - DotNetNuke - How do I force browsers to reload the site's CSS?

    How to make round circle links responsive in css?

    How to keep an unordered list centered within the screen?

    How to center parts of a list efficiently with CSS [Img Inside]

    How to fix position of html element label with css?

    HTML/CSS footer on mobile site doesn't work on IPhone safari How to fix?

    How to Remove the White Space below the Footer in Wordpress Site using CSS

    simple css issue - how to change anchor inside li if li:hover

    How can you stop the screen scrolling from the top of a Phonegap app?

    CSS selectors - how to select 'for' in CSS?

    how to set background-image to pseudo element?

    How to restrict the css star selector * to a class and all decendants?

    How can I select the item that doesn't have attribute [duplicate]

    Changing a DIV to “position:fixed” then change it back to “static” and show the rest of DIVs