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?
Related
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
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.
I've seen several questions asking something similar, but I can't get this font to render in my production app using a computer that doesn't have the font installed.
http://fortawesome.github.com/Font-Awesome/
Installed this: https://github.com/bokmann/font-awesome-rails
Added this:
*= require 'font-awesome'
to application.css
The icons ARE working, e.g.:
<i class="icon-envelope"></i>
correctly renders an envelope icon that is actually one of the font-awesome fonts. However, I can't get the alphabetic font to display in production (I just see Times New Roman). I've tried these instructions to no avail:
http://blog.fieldforceapp.com/moving-to-heroku-bootstrap-font-awesome
I'm concerned there may be a conflict with other css in my stylesheets directory (in app/assets/stylesheets):
/*
* 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 select2
*= require bootstrap-timepicker
*= require 'font-awesome'
*= require_tree .
*= require zpp.css
*/
Do I need a separate fonts directory? I'm running rake assets:precompile and see the font .css files moving into my public directory, but still no go.
Would love some help on this b/c I've been scratching my head for too long now. Thank you!
I'd make sure the css file points correctly to the font files..
as for the "alphabetic font", font awesome doesnt have a separate font for alpha numeric characters so if your default font is times new roman, that is what you would see..
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