I am trying to load the OOCSS framework into my new Rails 3.1 application. So far I have clone the project into /vendor/assists/stysheets/oocss, and tried to pull in the project from /app/assists/stylesheets/application.css
/*
* FIXME: Introduce SCSS & Sprockets
*= require ../../../vendor/assets/stylesheets/oocss/all
*= require_self
*= require_tree .
*/
However this does not work properbly, as the compiled css file just contains the two lines that should load the other files.
#import url("core/core.css");
#import url("plugins/plugins.css");
/*
* FIXME: Introduce SCSS & Sprockets
*/
/*
Place all the styles related to the matching controller here.
They will automatically be included in application.css.
You can use Sass (SCSS) here: http://sass-lang.com/
*/
/*
Place all the styles related to the matching controller here.
They will automatically be included in application.css.
You can use Sass (SCSS) here: http://sass-lang.com/
*/
/*
Place all the styles related to the matching controller here.
They will automatically be included in application.css.
You can use Sass (SCSS) here: http://sass-lang.com/
*/
Any ideas on how to pull this off?
UPDATE:
I did a dirty workaround by manually loading the CSS files in the correct order.
app/assets/stylesheets/application.css
/*
* FIXME: Introduce SCSS & Sprockets
*= require ../../../vendor/assets/stylesheets/oocss
*= require_self
*= require_tree .
*/
vendor/assets/stylesheets/oocss.css.scss
/*
* Core
*= require ../../../vendor/assets/stylesheets/oocss/core/libraries.css
*= require ../../../vendor/assets/stylesheets/oocss/core/template/template.css
* require ../../../vendor/assets/stylesheets/oocss/core/template/template_debug.css
*= require ../../../vendor/assets/stylesheets/oocss/core/grid/grids.css
* require ../../../vendor/assets/stylesheets/oocss/core/grid/grids_debug.css
*= require ../../../vendor/assets/stylesheets/oocss/core/module/mod.css
*= require ../../../vendor/assets/stylesheets/oocss/core/module/mod_skins.css
* require ../../../vendor/assets/stylesheets/oocss/core/module/mod_debug.css
*= require ../../../vendor/assets/stylesheets/oocss/core/media/media.css
* require ../../../vendor/assets/stylesheets/oocss/core/media/media_debug.css
*= require ../../../vendor/assets/stylesheets/oocss/core/content.css
*= require ../../../vendor/assets/stylesheets/oocss/core/heading/heading.css
*= require ../../../vendor/assets/stylesheets/oocss/core/spacing/space.css
*= require ../../../vendor/assets/stylesheets/oocss/core/table/table.css
*= require ../../../vendor/assets/stylesheets/oocss/core/table/table_skins.css
* require ../../../vendor/assets/stylesheets/oocss/core/table/table_debug.css
* Plugins
*= require ../../../vendor/assets/stylesheets/oocss/plugins/breadcrumb/breadcrumb.css
*= require ../../../vendor/assets/stylesheets/oocss/plugins/tabs/tabs.css
*= require ../../../vendor/assets/stylesheets/oocss/plugins/talk/talk.css
*= require ../../../vendor/assets/stylesheets/oocss/plugins/talk/talk_skins.css
*/
Best regards.
Asbjørn Morell
Related
I have installed bootstrap 4.5 into RAILS 6 and I want to extend some styles.
For that I have a file named banana.scss in app/assets/stylesheets that looks like this :
.form-read-only {
#extend .form-control, .form-control-sm;
background-color: rgb(233, 236, 239)
}
Now I want to embed this stylesheet after bootstrap is loaded, so I have modified the app/assets/stylesheets/application.css by
/*
...
*= require banana
*= require_tree .
*= require_self
*/
#import 'bootstrap';
#import 'banana';
But this leads to the error message in the browser to :
Error: The target selector was not found.
Use "#extend .form-control-sm !optional" to avoid this error.
on line 5 of app/assets/stylesheets/banana.scss
>> #extend .form-control, .form-control-sm;
But what is the remmmended way to extand bootstrap ?
I think the only issue is that you *= require banana before you #import 'bootstrap'. Try removing the first one:
/*
...
*= require_tree .
*= require_self
*/
#import 'bootstrap';
#import 'banana';
I've found an easy way to accomplish that.
Just import the bootstrap on the beginning of my custom stylesheet:
#import 'bootstrap';
.form-read-only {
#extend .form-control, .form-control-sm;
background-color: rgb(233, 236, 239)
}
Because I can't define the order in which the stylesheet files are loaded, here I'm sure when the custom stylesheet is loaded, in front of the depending bootstrap stylesheets are loaded at first.
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 am trying to integrate blueimp-gallery to my rails 4 application but when I try to display the caroussel i got this error :
Uncaught TypeError: Cannot read property 'name' of undefined
at this line of code:
style[transform.name] = 'translate(' + x + 'px, ' + y + 'px)' +
(transform.translateZ ? ' translateZ(0)' : '');
from the blueimp-gallery.js file
This is how I configure blueimp-gallery
gem 'blueimp-gallery'
in application.js
//= require jquery
//= require jquery-ui
//= require bootstrap-sprockets
//= require angular
//=require angular-route
//= require angular-animate
//= require angular-resource
//= require blueimp-gallery-all
//= require_tree .
in application.css.sass
/*
*= require rails_bootstrap_forms
*= require blueimp-gallery-all
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets"
#import "bootstrap"
#import font-awesome
Is there anything that I am doing wrong??
That is a JavaScript error. You can do some detective work working backwards from the error. Set breakpoints and see where something didn't get assigned properly. Here is where transform should have been defined: https://github.com/Phifo/blueimp-gallery/blob/6d4014a5398b53f2fc854b6566ed53947b678714/vendor/assets/javascripts/blueimp-gallery.js#L224
I am trying to use the asset pipeline in Rails 4.1 and seem to having a few issues with variables and their scope.
Here is my applications.css.scss
/*
*= require_self
*= require_tree .
*/
#import 'common/mixins';
#import 'common/variables'; /* variable $content-max-width defined here */
.main { height: $content-max-width; } /* works */
#import 'common/content'; /* fails, undefined variable $content-max-width */
I presume I have made a mistake I just don't understand what.
remove the
*= require_tree .
otherwise, you load everything twice and also there is no chance to load it in the correct order. rails just load it in a "random" way and then u most of the time run into errors.
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/