在Rails 4应用程序中实现wrapbootstrap主题的问题

Question

Rails noob here.

I've been fumbling through the process of integrating a wrapbootstrap one page parallax theme ( https://wrapbootstrap.com/theme/ashley-one-page-parallax-WB0R11207 ) into my rails 4 app.

After unzipping the files, the index.html page works (mostly), right out of the box.

The process I've gone through in the attempt to integrate it into a new rails app:

• Transfer all CSS files to assets/stylesheets folder
• Transfer all JS files to assets/javascripts folder
• Referenced all JS and CSS files in application.js and application.css
• Transfer all images to assets/images folder
• Generate new pages controller/view, and moved the previously discussed html file into this view
• Assigned root to above html file

The issue I'm running into is that the all of the JS and CSS don't appear to be executing. I have JS and CSS include tags in the header.

I've tried rake assets:precompile, but that wasn't successful.

Any tips on where I'm going wrong here?

Additionally, the index.html file includes a bunch of CSS setup in the head, ie:

<!-- Bootstrap  -->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- web font  -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800" rel="stylesheet" type="text/css">
<!-- plugin css  -->
<link rel="stylesheet" type="text/css" href="js-plugin/animation-framework/animate.css" />
<link rel="stylesheet" type="text/css" href="js-plugin/magnific-popup/magnific-popup.css" />
<link type="text/css" rel="stylesheet" href="js-plugin/isotope/css/style.css">
<link rel="stylesheet" type="text/css" href="js-plugin/flexslider/flexslider.css" />
<link rel="stylesheet" type="text/css" href="js-plugin/pageSlide/jquery.pageslide.css" />
<!-- Owl carousel-->
<link rel="stylesheet" href="js-plugin/owl.carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="js-plugin/owl.carousel/owl-carousel/owl.theme.css">

and a bunch of javascrip tags at the bottom of the body, ie:

<script type="text/javascript" src="js-plugin/respond/respond.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js"></script>
<!-- third party plugins  -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js-plugin/flexslider/jquery.flexslider-min.js"></script>

<script type="text/javascript" src="js-plugin/isotope/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.form.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js-plugin/magnific-popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.localscroll-1.2.7-min.js"></script>

Am I correct in understanding that with the asset pipeline, these callouts aren't required in the view? Shouldn't all the CSS and JS be precompiled in application.css and application.js?

Answer 1

The issue was that I had brought over all CSS and JSS files that were included with the template, but the folder also contained CSS and JS that was not required, and some of these files caused conflicts when being loaded in the asset pipeline. Once I pruned out all files that weren't required, all worked as expected.

As a summary: Move all required CSS files to assets/stylesheets Move all required JS files to assets/javascripts

Explicitly include/require each of the CSS/JS files in their respective application.css and application.js files.