css files not loading with application.scss

274
November 26, 2016, at 8:56 PM

I added some css files to my vendor library and I am trying to get them to work on my app. I see the full css when I pull up my development page to look at the file

 http://0.0.0.0:3000/assets/application.css.scss

but its not working on the actual page. When I look at the source code of the page I see

<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>

But it shows the js files but not the additional css files. Why would it show the js files but not the css files. I imported the additional css files to the application.scss like so...

@import "fontello";
@import "font-awesome";
@import "animation";
@import "hover";
@import "morphext";
@import "settings-ie8";
@import "settings";
@import "fontello-codes";
@import "fontello-embedded";
@import "fontello-ie7-codes";
@import "fontello-ie7";
@import "owl.carousel";
@import "owl.theme";
@import "owl.transitions";
@import "bootstrap";
@import "bootstrap-theme";

Like I said I see it in the application.scss file when I pull it up in the browser but its not working on the page. Here is the link on my page view...

<%= stylesheet_link_tag    "application", media: 'all', "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "rails.validations", "data-turbolinks-track" => true %> 

I noticed that on the source code it shows turbolinks first and NOT the link href... to the application.css file. What am I missing?

--UPDATE--

I noticed however if i change the call of the css to manually add each css then it comes up in the source code,

<%= stylesheet_link_tag    "application", "hover", media: 'all', "data-turbolinks-track" => true %>

Source code of page becomes...

<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/hover.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>  
etc...

so why is it not putting the css files together when i just call application.scss?

Answer 1

Have you loaded vendor library in application.rb file like this:-

config.assets.paths << Rails.root.join('vendor', 'assets')

and then require these in your application.css.scss like:

@import "external_library/contents";
READ ALSO
How to maintain original dashes in SVG after animating ?

How to maintain original dashes in SVG after animating ?

I have a SVG that i am trying to animate and i am using the following jQueryWhat i really want to do is make an animation of the dotted line being drawn , while keeping the dots intact

267
Scroll to the top of the element click in accordion jQuery

Scroll to the top of the element click in accordion jQuery

I'm making an accordian, everything works fine, the thing is the content of each element is pretty large and I can't make the element to scroll at the top of title to start reading at the top of the element clicked, I'm trying with jQuery animate but is not working

336
how can replace multiple chars of string in jquery

how can replace multiple chars of string in jquery

It will replace all / of string, but I want just replace/

288
blueimp jquery file upload done callback not working on mobile

blueimp jquery file upload done callback not working on mobile

I am using blueimp jquery fileupload pluging to upload image to server it is working absolutely fine on desktop on all the browsers but its not working on mobile I dont know is there anything I have to do extra to upload file in mobile devices My code is

287