I want to have a onepager with different css, javascript and images files to use as my landing page for my application.
I moved my css in the vendor/assets folder under a subfolder called onepager. I used a subfolder because I'll only use these files for the onepager and not for anything else.
e.g.
vendor/assets/stylesheets/onepager/
I created a separate layout which references separate css files. > onepager.html.erb
<%= stylesheet_link_tag 'onepager', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'onepager', 'data-turbolinks-track' => true %
Within the files onepager.js and onepager.css.scss I want them to reference to the files within the vendor/assets/xxx/onepager/ folder. I have added following code but I get an error.
onepager.css.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree ./onepager/
*/
onepager.js
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree ./onepager/
*/
I get the error that the require tree is not a directory? This is strange since it is a directory and I assume the files within the vendor assets are loaded automatically?
How can I fix this?
require_tree argument must be a directory
(in /home/ubuntu/workspace/app/assets/stylesheets/onepager.css.scss:13)
Found the answer myself.
I have to add:
//= require_tree ../../../vendor/assets/javascripts/onepager
and the same for the css files. After that the error page notifies me to update the config/initializers/assets.rb file with the code it provides.
I now works.
Source:
https://github.com/rails/rails/issues/1223
Related
I am trying to use the Rails asset pipeline in my app in a way described at (http://www.mattboldt.com/organizing-css-and-sass-rails/), but am noticing some weird behavior which I believe is causing my styles not to be applied.
The structure of my assets directory is as such:
+-- assets
+--- images
+--- javascripts
+--- stylesheets
+--- styles
- global.scss
- scaffolds.scss
- application.css
- main.scss
I've set up my application.css file to require only itself and a main.scss file in the same app/assets/stylesheets directory:
*= require_self
*= require main
This main.scss file contains all of the other files I'd like to import:
#import "bootstrap-sprockets";
#import "bootstrap";
#import "styles/global.scss";
#import "styles/scaffolds.scss";
However, it seems like none of my styles are being applied when I try to view the project in my browser. The peculiar thing I'm noticing is that my browser is showing that it's downloading both an application-self-<hash>.css file, and a main-self-<hash>.scss file. The first file is mostly blank, and looks as follows:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*/
The main-self-<hash>.css file contains all of the custom CSS I've imported into it from other files. I was under the impression that it should actually be compiled into the application.css file instead of being compiled into css and served in its own file. In any case, the effects of this are clear - my styles aren't being applied. I'm not sure where to look to resolve this. Can anyone help point me in the right direction, please?
[EDIT] It seems like externally-sourced (from a URL) CSS files do get compiled properly, and their styles are applied. For instance, I added #import url('http://www.w3schools.com/lib/w3.css'); to my main.scss file and made use of it by applying one of the CSS file's classes to one of my div elements. The style was applied.
In Development mode the assets (css, js) are rendered as is in separate files.
They are combined into one file in production mode when you run
rake assets:precompile
You can check browser "Requests" and "Sources" in Developer tools to make sure if the files are being loaded.
I don't know if it solves the entire problem, but I do know that application.css should be named application.css.erb or the requires will not work.
From the Rails spec
"The asset pipeline automatically evaluates ERB. This means if you add
an erb extension to a CSS asset (for example, application.css.erb),
then helpers like asset_path are available in your CSS rules:
Note about assets
Since all compiled assets are served from /public/assets/, adding a subdirctory structure in the source tree under stylesheets serves only add points of possible failure in the code.
When attempting to visit a page using Capybara and Rspec, I get the following error:
The error:
Failure/Error: visit login_path
ActionView::Template::Error:
Invalid CSS after "*": expected "{", was "= require boots..."
(in app/assets/stylesheets/application.css)
The file (/app/assets/stylesheets/application.css):
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
*= require bootstrap.min
This code was generated by the twitter bootstrap rails generators provided by the gem, and as far as I know, the syntax is correct. Why is it complaining?
I would like to know if it's possible to require some assets over HTTP, eg:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_tree .
*= require 'http://assets.domain.com/stylesheets/style.css'
*/
I get a Sprockets::FileNotFound error with this snippet.
Thank you
The Sprockets readme notes that require takes a path, and makes no reference to pulling things off HTTP.
The JurassicCoffee project for .NET appears to have added the ability to load files over HTTP.
Same question but with JS...
I'm trying to import a static javascript template into a basic rails app, so that I can then build more rails functionality with it (particularly with the backend).
Here is a window into some possibly related directories / files...
/app/assets/stylesheets/
application.css
base.css
blue.css
bootstrap-responsive.css
bootstrap-responsive.min.css
bootstrap.css
bootstrap.css.erb
bootstrap.css.scss
bootstrap.min.css
bootstrap_and_overrides.css.less
docs.css.less
fontawesome.css.erb
glyphicons.css
sprites.css.erb
/app/assets/stylesheets/application.css:
/* This is a manifest file that'll be compiled into application.css,
* which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory,
* lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can
* be referenced here using a relative path.
*
* You're free to add application-wide styles to this file
* and they'll appear at the top of the
* compiled file, but it's generally better to create a
* new file per style scope.
*
*= require formtastic-bootstrap
*= require_self
*= require_tree .
*/
/app/assets/fonts:
glyphicons readme.txt
glyphicons-regular.otf
glyphicons-regular.svg
glyphicons-regular.ttf
glyphicons-regular.woff
glyphiconshalflings-regular.eot
glyphiconshalflings-regular.otf
glyphiconshalflings-regular.svg
glyphiconshalflings-regular.ttf
I would be extremely grateful for any help at all, thank you so much!
=== UPDATE =====
As #m_x suggested, I needed to have my manifest file (i.e. application.css in the app --> assets --> stylesheets directory) match the order that files were referenced in the original template (in the index.html tag). Here is the new version:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
* add after glyph <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
*= require_self
*= require bootstrap.min.css
*= require bootstrap-responsive.min.css
*= require glyphicons.css
*= require google-fonts.css
*= require base.css
*= require blue.css
*/
=======
The above code was based on the index.html file from the template, the important part of which is as follows:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/glyphicons.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link href="css/base.css" rel="stylesheet">
<link href="css/blue.css" rel="stylesheet">
Note that I manually created a file to contain the css found in the 4th URL listed above (I named this css file "google-fonts.css"), because I wasn't sure how to reference a URL...
You have multiple files with the same name but different extensions. I'm not sure that erb, scss, less files won't overwrite the standard css during compilation, so this may be one cause of your issue.
Other than that, the problem most certainly stems from the fact that require_tree includes files in the order it finds them on the filesystem. This means that, in your case, bootstrap-responsive.css may get included before bootstrap.css (depends on your filesystem). As you know, the order in which files are included is very important for both stylesheets and scripts.
There are two main solutions to force the order of inclusion :
instead of require_tree, use require <filename> as described in the guides and include each file manually, in any order you want (i.e. the order you included them in the head before using the asset pipeline). To ease management and tidy your folder, you can split your assets into different folders ; if you create a manifest named index in a folder, using require <folder_name> will include this manifest. That's what i usually do.
Some people prefer prefixing each file with a number, e.g. 01_bootstrap.css, 02_bootstrap-responsive.css, etc. I never used this approach but AFAIK it seems to work.
Here's my application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require bootstrap
*= require bootstrap-responsive
*= require style
For some reason none of my css styles are being applied. When I view source and open application.css, the file is exactly the same. It's not compiling it. The application.js is compiling just fine!
my gemfile: https://gist.github.com/1748054
Any ideas?
EDIT: Fixed it by adding */
Make sure you have:
# Enable the asset pipeline
config.assets.enabled = true
set in your config/application.rb
Also this is a bit of a shot in the dark but don't you need to have a line like this:
*=require_self
before anything else. I always use sass imports to include my stylesheets with more precision. So mine would look like this:
/*
*= require_self
*/
#import "bootstrap.css";
#import "bootstrap-responsive.css";
#import "style.css";
Then just make sure your file is named application.css.scss