I have a LESS-based rails application.
since I added summernote html editor, I had to add also SASS code to my project.
So I added these lines:
Gemfile:
gem 'font-awesome-rails'
gem 'summernote-rails'
gem 'bootstrap-sass'
application.css:
*= require font-awesome
*= require summernote
In local everything works fine.
When I commit the application to heroku I get the following error:
Sass::SyntaxError: Undefined variable: "$alert-padding".
(in /tmp/build_xxx/vendor/bundle/ruby/2.1.0/gems/bootstrap-sass-3.3.1.0/assets/stylesheets/bootstrap/_alerts.scss:10)
I guess I miss the SASS variables, but have no idea how to add them without create any conflict with the LESS code.
============= EDIT =================
The precompilation is broken on the first sass variable it finds, in file /gems/bootstrap-sass-3.3.1.0/assets/stylesheets/bootstrap/_alerts.scss:
.alert {
padding: $alert-padding;
I assume the precompiler does not have any SASS variable declared, and fails to precompile on the first place it finds any.
============= EDIT =================
I added to my application.scss the #import I understand I needed to have, now it looks like this:
#import "bootstrap-sprockets";
#import "bootstrap/variables";
#import "bootstrap/mixins";
#import "bootstrap";
/*
* 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_self
*= require custom_bootstrap/custom_bootstrap
*= require custom
*= require social-share-button
*= require bootstrap-datetimepicker
*= require dataTables/jquery.dataTables
*= require dataTables/src/demo_table_jui
*= require pricing
*= require jquery.fileupload-ui
*= require font-awesome
*= require social-buttons-3.css
*= require summernote
*/
I definitely have _variables.scss included (I renamed it in order to be sure), and I see that $alert-padding is declared:
$alert-padding: 15px !default;
$alert-border-radius: $border-radius-base !default;
$alert-link-font-weight: bold !default;
Still, I get this error!
PD -
I use the following command in order to check precompilation locally:
RAILS_ENV=development bundle exec rake assets:precompile
You can find installation instructions here.
I fail to see at least those:
application.css should be application.scss
gem 'sass-rails' in your Gemfile
use the import statements accordingly and appropriately in your application.scss
Related
I am working on a rails engine which includes bootstrap-sass. I am trying to use a bootstrap variable in my styles, but I'm getting an error. I am trying to follow the documentation here:
https://www.rubydoc.info/gems/bootstrap-sass/3.4.1
# test_engine.gemspec
# ...
s.add_dependency "rails", ">= 5"
s.add_dependency 'sassc-rails'
s.add_dependency 'bootstrap-sass'
# ...
application.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 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.
*
*/
#import "bootstrap-sprockets";
#import "bootstrap";
#import "bootstrap-variables";
I've defined a manifest file for the dummy app where the rake task is running:
test/dummy/app/assets/config/manifest.js
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
//= link test_engine_manifest.js
And a manifest file for my engine:
app/assets/config/test_engine_manifest.js
//= link_directory ../javascripts/test_engine .js
//= link_directory ../stylesheets/test_engine .css
Here's the file where I'm trying to use the variable:
// _thing.scss
.thing {
color: $brand-primary;
}
and the output from rake app:assets:precompile
> ❯❯❯ rake app:assets:precompile
rake aborted!
SassC::SyntaxError: Error: Undefined variable: "$brand-primary".
on line 2:10 of app/assets/stylesheets/test_engine/_thing.scss
>> color: $brand-primary;
---------^
Shouldn't $brand-primary be defined by bootstrap? What am I missing?
in your application.scss file
add this line
#import "bootstrap-variables";
hope this will work for you.
Thank you.
I have ruby on rails project in which I want to include scss files in my style sheets that is application.css
The directory structure is look like below:
The problem is that when I try to do this in my application.css file:
*= require font-awesome
*= require bootstrap
*= require slick
*= require basic-theme
*= require style
*= require_self
#import url("style.scss"); //it is in scss folder.
it still does not parse the code in it. Also if I set the path with assets/ it does load it but gives error like:
Sass::SyntaxError in Home#index
Undefined variable: "$base-font".
How I can easily import all these scss files in my rails app? Also any best practices please?
Instead you need to use
#import "<relative path to style.css without .scss>"
How do I include footable in Ruby on Rails 4?
In my Gemfile I added gem 'foo_table-rails'
I did a bundle install after that.
In my application.js I wrote: //= require footable.core
In application.scss I wrote: //= require footable.core
I have tried even *= require footable-rails , but unfortunately it is not working.
My application.scss is as shown below:
#import "bootstrap-sprockets";
#import "bootstrap";
*= require footable.metro
PS: I have already installed bootstrap & I have been using its templates.
Your application.js is correct, but in your application.scss, you need to choose a theme, if you're starting with the metro theme for example use:
*= require footable.metro
Try changing your application.scss to:
/*
*= require footable.metro
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
I have installed normalise-rails gem in my project and it all seems to work fine.
But I notice there is no css file generated in the app and I'm curious to know how this is working.
This is not a problem and such but it will be good to know what has happened in the background.
Look, to make it work you added to application.css these lines:
*= require_self
*= require normalize-rails
*= require_tree .
And middle line just requires normalize-rails.scss file that you can found in gem's vendor/assets/stylesheets directory.
That's because the gem isn't downloaded in your project. All the gems are installed in your INSTALLATION DIRECTORY - more info.
If you want to use an edited version of normalize.css, then just download the stylesheet and save it in your app's
vendor/assets/stylesheets/
folder and include that file in your
app/assets/stylesheets/application.css
, like:
/*
*= require_tree .
*= require normalize
*= require_self
*/
I've updated my app to use the rails 3.1 asset pipeline (I think). I can compile .css files but not css.scss. I am running the sass-rails gem but nothing seems to work.
What should I check? Sorry, I don't know exactly what info I should supply here to help debug. I can edit this...
EDITS:
My .scss file contains:
/*
*= require_self
*= require_tree .
*/
edit:
see Sprockets::CircularDependencyError in Store#index
Thanks,
Rim
Remember that css.scss files need to be included, not imported like the rest:
So: Turn you application.css into an application.css.scss, and do like this in it:
/*
*= require ./normal/custom.css
*= require_self
*/
#import "normal/design/control_panel";