Using a custom jQuery Mobile theme created via Themeroller works fine with Rails for local development. However, running:
rake assets:precompile
on the production server results in this error:
Invalid CSS after "...gradient(linear": expected ")", was ",left top,left ..."
With that line of code in custom-theme.min.css being:
background-image:-webkit-gradient(linear,left top,left bottom,from( #333333 ),to( #333333 ));
The custom theme is included in application.css:
*= require_self
*= require_tree .
*= require jquery.mobile.structure-1.1.1.min
*= require custom-theme.min
*= require jquery-mobile-fluid960.min
I believe the generated Themeroller syntax is valid... Does it have something to do with the css/sass/scss combination?
Turns out the jQuery Mobile Themeroller can be a little buggy. If gradients and borders are not set—that is, omitting the hex color code—it still generates the # tag but no color code, or appends 'NaN' to the end of a gradient color. Setting all colors in Themeroller and then a simple search for border:1px solid # ; and replace on the generated *.min.css file cleaned this up.
Related
I'm trying to precompile assets in production. But I'm getting an error when including the file below.
bootstrap_style.sass
#import bootstrap
a
color: #6b9029
application.css
/*
*= require_self
*= require jquery-ui
*= require prettyPhoto.css
*= require prettyLoader.css
*= require prettyPopin.css
*= require prettyPhoto.css
*= require sass/main
*= require sass/master
*= require sass/ie
*= require sass/ie8
*= require sass/buy_now
*= require sass/ssl_seal
*= require font-awesome
*/
/*
TODO: I had to remove the site report from the main import here.
This will need to be added back and loaded only on the site report page only
or figure out why the styles are conflicting with the main layout
require sass/site_report
*/
error
rake aborted!
Sass::SyntaxError: Invalid CSS after "...lor}: #{$value}": expected "{", was ";"
/var/lib/gems/2.6.0/gems/bootstrap-4.4.1/assets/stylesheets/bootstrap/_root.scss:5
updated error
SassC::SyntaxError: Error: Undefined operation: "prefix-usage(browser-prefixes(browsers()), css-boxshadow, (full-support: true), (partial-support: true)) gt 0.1".
on line 324:7 of ../var/lib/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scss, in function `use-prefix`
from line 208:33 of ../var/lib/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scss, in function `prefixes-for-capability`
from line 218:40 of ../var/lib/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scss, in mixin `with-each-prefix`
from line 360:12 of ../var/lib/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scss, in mixin `prefixed-properties`
from line 43:12 of ../var/lib/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_box-shadow.scss, in mixin `box-shadow`
from line 3902:12 of app/assets/stylesheets/sass/main.sass
>> #if $usage > $threshold {
------^
main.sass
#include box-shadow(0 0 1px 1px rgba(255, 255, 255, 0.4) inset)
You can check the syntax of your files by running sass -c app/assets/stylesheets. That might detect the issue for you.
You can also check this github reference #sass
/*
* 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, 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 other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require jquery-ui
*= require prettyPhoto.css
*= require prettyLoader.css
*= require prettyPopin.css
*= require prettyPhoto.css
*= require sass/main
*= require sass/master
*= require sass/ie
*= require sass/ie8
*= require sass/buy_now
*= require sass/ssl_seal
*= require font-awesome
*= require_self
*/
i already install asset-pipeline:1.8.10.
i'm confusing how to call css and javascript. i already googling. i found this video
but i havenot understood.
at folder grails-app/asset/stylesheets have based.css,bootstrap.css, main.css. last i create new file with application.css
but i only add this code to application.css
/*
*require bootstrap
*require based
*main.css
*require jquery-ui.custom
*require bootstrap
*require_self
*require_tree
*/
in gsp i use <asset:stylesheet src="application.css" />
but it likes not work. because the page is blank.
example :
grails-app/asset/stylesheets have based.css
based.css coding is
body
{
#FF0000;
}
at index.gsp
i call <asset:stylesheet src="application.css" />
then how about application's content?
there are a couple of things wrong in your application.css, first why do you import bootstrap twice? the second thing is, that you use require_tree with no folder given like: "require_tree . " or "require_tree subfolder"
here should be a working example:
/*
*require bootstrap
*require_tree .
*/
with a given folder structure like:
/grails-app/assets/stylesheets/
/application.css
/based.css
/main.css
and the bootstrap plugin required via BuildConfig.groovy.
The other aproach is to require different stuff directly instead of using the require_tree directive:
/*
*require bootstrap
*require based
*require main
*/
I have a Rails 4 app, using the foundation-rails v5.2.1.0 gem, and one custom SCSS file for my application layout. When I use a variable from the foundation_and_overrides.scss file, I get the following error:
Undefined variable: "$header-font-family"
I've included relevant code below. I can post more if needed. Anyone know what's going on here?
From application.css:
*
*= require foundation_and_overrides
*= require_self
*= require_tree .
*/
From foundation_and_overrides.scss:
// We use these to control header font styles
$header-font-family: "futura-pt", sans-serif;
$header-font-weight: 400;
// $header-font-style: normal;
From custom.css.scss:
$include-html-global-classes: false;
#import "foundation/components/global";
.
.
.
.footer {
background-color: black;
color: white;
height: 100px;
font-family: $header-font-family;
}
You are getting the error because foundation_and_overrides.scss is executing after custom.css.scss. Best way to do this is to define your variables in a partial and import it in your main stylesheet after foundation.
First change the file name from
foundation_and_overrides.scss to _foundation_and_overrides.scss
and then import it in custom.css.scss file after foundation with
#import 'foundation_and_overrides';
Update
Rename your application.css to application.css.scss and custom.css.scss to custom.scss
In your application.css.scss remove *= require_tree .
And then import your main stylesheet with
#import 'custom'
I hope this helps
The cleanest way is to add the line
#import "custom";
to your file foundation_and_overrides.scss before the line
#import "foundation";
There's no need to remove *= require_tree . from application.css.scss as stated in the accepted answer. There's also no need to add require foundation_and_overrides to application.css if you leave require_tree . in there.
According to the Rails Docs:
If you want to use multiple Sass files, you should generally use the Sass >#import rule instead of these Sprockets directives. When using Sprockets >directives, Sass files exist within their own scope, making variables or >mixins only available within the document they were defined in.
So in this case the order of the directives (the lines in application.css that start with *=) doesn't matter because each of those files lives in its own scope and you can't access their variables from another scss file. That's why you want to either #import foundation_and_overrides and then custom, or #import your custom stylesheet into foundation_and_overrides.
I've been having this problem all week and everything I've tried hasn't worked and I'm not even sure why it exists. (It's somewhat of a follow up to this question I posted.
I added lightbox2 js and css files to my rails 3.2.8 project.
I'm currently getting these errors on every page, in my local environment, (even pages I'm not calling lightbox in the markup) in the console-
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/assets/images/close.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/assets/images/laoding.gif
And broken image indicators being displayed on every page.
I hardcoded a path change to lightbox.js to appropriately retrieve aforementioned images and they work as they should when lightbox is used.
LightboxOptions = (function() {
function LightboxOptions() {
+ this.fileLoadingImage = '/assets/loading.gif';
+ this.fileCloseImage = '/assets/close.png';
- this.fileLoadingImage = 'images/loading.gif';
- this.fileCloseImage = 'images/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Image";
this.labelOf = "of";
}
I don't understand why I am getting these errors when I can clearly see the images working in my local environment. Another, curious thing is lightbox is still working without having to require it in application.js and application.css
Here is the output from my term-
Started GET "/assets/images/loading.gif" for 127.0.0.1 at 2013-01-06 12:36:31 -0800
Served asset /images/loading.gif - 404 Not Found (11ms)
ActionController::RoutingError (No route matches [GET] "/assets/images/loading.gif"):
and the same for close (but given screenshot it's obviously appearing)
application.js
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.ui.datepicker
//= require justgage
//= require raphael.min
//= require jquery.purr
//= require best_in_place
//= require_tree .
(shouldn't I need lightbox above?)
*= require jquery.ui.datepicker
*= require_self
*= require bootstrap
*= require_tree .
*/
(shouldn't I need lightbox above?)
Lightbox being used in the view.
<div class="row does_description_whole">
<div class="row offset3">
<div class="span3 does_description_text">
<h4>Joe Popular</h4>
<p>Lorem ipsum hipster bacon.</p>
</div>
<div class="span3">
<img src="https://lh3.googleusercontent.com/pciture/glance_town.png" class="does_pictures">
</div>
</div>
</div
Edited lightbox.js for appropriate path
I don't understand why 1. Each page is GET requesting (to error) the images even though they are displaying appropraitely and 2. Why I don't need to require the lightbox files in application.js and application.css.
Thanks for your attention and for taking a look.
If you are about to use the assets pipeline , you should make references to images like this :
= (link_to image_tag(pic.image_url(:thumb)), pic.image_url, :rel => "group2", :class => "lightbox") if pic.image?
You could consider using of link_to helper instead of a href . The :rel => is specifying the source of images to browse .
Normally , the reference to an image is in format :
url('yourpng.png')
About why you should not include the lightbox in your manifests : You should include them , both in .js and .css manifest .
SOLVED : And at the end of the day , it was as simple as rm -rf public/assets (#Tmacram shared the right solution with us).
Here is my tree
stylesheets/
admin/
admin.scss
bootstrap_and_overrides.css.less
application.css.scss
categoria.css.scss
categories.css.scss
comments.css.scss
groups.css.scss
home.css.scss
ie.css.scss
images.css.scss
images.js.coffee
specs.css.scss
1 -> Is it possible (in application.css) to don`t load bootstrap_and_overrides.css.less?
My problem is..
my app have two layouts, one of then called admin, i would like to load bootstrap only in this layout, not for all application..
everyone?
You could add all your file separately in your application.css.scss, without bootstrap_and_overrides, like this :
/**
* application-print.css
*
*= require categoria
*= require categories
...
*/
and include bootstrap_and_overrides separtely
you could place your files in a directory and use require_tree ./normal/