如何在bootstrap-sass gem上实现boostrap模板

Question

I have a ROR app using the bootstrap-sass gem and I want to load a template that I purchased onto the app and override the regular bootstrap. The template gave me the following files...

- template (The Project template) 
- - bootstrap  (All Bootstrap files. We keep all of them in this folder to make updates easily)
- - css  (CSS files of the template)
- - - skins  (CSS skin files)
- - fonts (External font libraries)
- - - font-awesome
- - - fontello
- - images  (All the images of the template)
- - js  (Javascript files of the template)
- - less  (All the less files)
- - php  (PHP files of the template)
- - plugins  (All external libs. We keep all of them in this folder to make updates easily.)
- - videos  (All video files)

I have this tree of files loaded in my lib/assets file but I cannot see how to access them. According to the docs this should access the files but it doesn't seem to work.

<!-- Web Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:700,400,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>

<!-- Bootstrap core CSS -->
<link href="stylesheets/bootstrap.css" rel="stylesheet">

<!-- Font Awesome CSS -->
<link href="fonts/font-awesome/css/font-awesome.css" rel="stylesheet">

<!-- Fontello CSS -->
<link href="fonts/fontello/css/fontello.css" rel="stylesheet">

<!-- Plugins -->
<link href="plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
<link href="plugins/rs-plugin/css/settings.css" rel="stylesheet">
<link href="stylesheets/animations.css" rel="stylesheet">
<link href="javascripts/plugins/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="plugins/owl-carousel/owl.transitions.css" rel="stylesheet">
<link href="plugins/hover/hover-min.css" rel="stylesheet">

<!-- the project core CSS file -->
<link href="stylesheets/style.css" rel="stylesheet" >

<!-- Color Scheme (In order to change the color scheme, replace the blue.css with the color scheme that you prefer)-->
<link href="css/skins/light_blue.css" rel="stylesheet">

<!-- Custom css -->
<link href="/stylesheets/custom.css" rel="stylesheet">

I cant seem to access any files. I am using the gem 'bootstrap-sass', '~> 3.2.0'

I tried importing files into my application.scss file

@import "bootstrap";
@import "custom";
@import "style";
@import "animate";
@import "animations";

I keep getting errors on my log that show...

Started GET "/stylesheets/custom.css" for 10.0.2.2 at 2015-11-24 19:11:15 +0000

ActionController::RoutingError (No route matches [GET] "/stylesheets/custom.css"):,etc...

I am not sure how to access the files in development or production.

Answer 1

I recommend you start by reading The Asset Pipeline documentation: http://guides.rubyonrails.org/asset_pipeline.html

One thing I noticed is you added the files to: lib/assets, I recommend you put them in vendor\\assets like so:

Then you'll need to add those respective files to both your Javascript (application.js) and your Stylesheet (stylesheet.css.scss) manifests like you are doing above.

And Just fyi, several of the libraries you have there are available as gems, they usually make it easier to add assets to your projects. I know owl-caroussel has a gem and so does font-awesome.

Hope that helps!