I'm working on a rails app and using Sass. So far everything has been done in the application.scss file which has worked great.
I'm having two issues which I think are caused by the same problem.
1) I created a users model which generated a users.scss file. When I started to use it, I noticed that it wasn't actually importing into the final web page. So at the top of the application.scss file I added #import "users". Which leads to issue 2.
2) When running the final page, I get a Syntax error:
Invalid CSS after "// VARIABLES": expected selector or at-rule, was "$hero-font: Lor..."
I'm wondering if I might have missed where the import is happening for the Sass files or am using them incorrectly?
Thanks!
I added back the *= require statements from the application.scss file.
Related
I'm trying to add the Trumbowyg WYSIWYG editor to a rails app using Active admin using this gem.
The instructions seem clear, but I'm getting the following error for the scss import:
SassC::SyntaxError at /admin/messages/new
Error: File to import not found or unreadable:
activeadmin/trumbowyg/trumbowyg.
on line 16 of app/assets/stylesheets/active_admin.scss
>> #import 'activeadmin/trumbowyg/trumbowyg';
I tried removing the import line. This allowed the app to load, but of course the editor tools did not appear.
Could anyone please suggest a way to fix this?
You have most probably missed importing Active Admin JS files in the app/assets/javascripts/active_admin.js file. As it mentions on the gem's page that you have linked. Just add these lines to the above file-
//= require activeadmin/trumbowyg/trumbowyg
//= require activeadmin/trumbowyg_input
I am having trouble using SCSS #import statements within any of my Rails Engines. Can someone please help me sort this out? Here are some details:
Using #import within any SCSS files within the Rails engine files causes the main application to crash. Here are the last two lines that the logger shows.
Rendered <snipped> (Duration: 87.4ms | Allocations: 33352)
Aborted (core dumped)
SCSS works correctly within the engine when #import is not used
SCSS #import statements work correctly within my main applications asset files
I am running Rails 6.0 and sassc-rails
So far I cannot find any way to get them working. Can someone please help me sort this out?
We had the same problem with one of our scss files that was still using #import "foo.css" syntax. Changing syntax to #import url(foo.css) fixed it for us.
Not clear what syntax you are using from the original question.
The issue actually was a bug with thin server which I have been using in development, switching to puma solved this problem.
I have a } missing in scss file and got the same error.
Adding missing } fixed the error in my case.
Please check your latest changes in scss/css files once.
This is driving me nuts - I have a Rails app built on Bootstrap. I have been plugging along for a few weeks and today I hit a very bizarre issue. If I make any trivial change (i.e. add a new line and save) to ANY style sheet I loose a bunch of my CSS formatting.
This is hard to explain without some how publishing all my code etc. The biggest symptom is the loss of my Google fonts.
Here is the top part of my application.css.scss file:
#import "font-awesome-sprockets";
#import "font-awesome";
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600,700);
/*** BOOTSTRAP ***/
/* Needs to load first to overide the default CSS */
#import "bootstrap_custom";
#import "bootstrap-sprockets";
#import "bootstrap";
#import "timeline";
I have some more custom CSS after this too. The font-awesome and bootstrap CSS still seems to load. The CSS code that seems to disappear is the bootstrap_custom. This is where I have my Google fonts and some custom CSS for my nav-bar.
Restarting the rails server does not fix it. Replacing the edited css file does not work. I literally have to restore an older version of the entire app directory.
It does not matter if I change the file with terminal or TextMate - same result.
If it matters I am running Rails 4.1.8 on OS X 10.10.1. I must hame something configured wrong or there is some weird Rails server cache or setting I am missing here. The fact I have to restore the entire app directory would lead me to believe this.
UPDATE
I think its a SASS or Bootstrap-sass issue. I ran the CSS from both versions through an online file compare site. The working version has CSS comments like this:
/* line 111, /Users/dan/.rvm/gems/ruby-2.0.0-p247/gems/bootstrap-sass-3.3.1.0/assets/stylesheets/bootstrap/_carousel.scss */
.carousel-control.right {...
and the broken one:
/* line 5482, /Users/dan/Rails/broken-app/vendor/assets/stylesheets/bootstrap.css */
.carousel-control.right {...
The working one also has around 500 more lines of CSS! Again this was just after adding a line to my application.css.css file, deleting it and saving it again. Same result if you clear the cache. Will look at my gems versions etc.
I am using bootstrap-sass in a Rails application. So far, everything has worked fine, but I have just tried to import another third-party sass file that uses bootstrap variables and it cannot see them.
In my application.css.scss
*= require bootstrap_local
In bootstrap_local.css.scss
#import "bootstrap";
#import "bootstrap-social";
When I do a page access, I get a Rails error
Undefined variable: "$line-height-computed".
(in .../app/assets/stylesheets/bootstrap-social.scss:11)
The variable needed by bootstrap-social.scss is defined in the previously imported bootstrap file (in fact it's defined in a partial bootstrap/variables that it includes).
As far as I understand, this should work because bootstrap_local is required, which means that everything in it is compiled together in one scope, so everything imported into bootstrap_local is treated as being one large file. Perhaps I have this wrong?
If I throw an #import "bootstrap"; into bootstrap-social.scs then it works fine. But I should not need to do this, so I either doing something wrong or I there is some misconfiguration with my setup.
What do I need to do to fix this?
Gems:
bootstrap-sass-3.1.1.1
sass-rails-4.0.3
System:
Rails 4.0.1
ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-linux]
(Bootstrap Social is a set of social sign-in buttons made in pure CSS based on Bootstrap and Font Awesome.)
The problem described in the question can be resolved by changing the application.css.scss manifest to use import instead of require:
#import "bootstrap_local";
It is also necessary to remove any require_tree . from the manifest because it would otherwise require the same bootstrap_local file because it lies in its path.
On reflection, not having require tree . in the manifest is probably wise because it prevents unwanted files from being included. I only had it there because it's there by default in a new Rails project (the same goes for require_self; it's cleaner not to put that in the manifest).
In reference to the suggestion about prefixing the file with an underscore, this is a good thing to do when the you don't need file, like bootstrap-social in the question, to be a compiled into a separate CSS file. So, I did end up renaming it to _bootstrap-social.scss.
Ran into an interesting problem and wondered if anyone else has as well.
I'm doing a Rails tutorial and part of the setup is installing the bootstrap-sass gem. The tutorial recommends for installing bootstrap, to rename the existing application.css file to application.css.scss, removing all the contents in that file, and then adding #import "bootstrap";.
I downloaded the tutorial's source code and ran it on my local machine and it works just fine.
However, when I implemented this in my code, no css stylings appeared. No errors appeared in the logs, either, though I noticed there was no GET request for the css occurring. I even went into the source code, clicked the css file and it appeared empty, while all the bootstrap javascript files were not empty.
After a while, I decided to implement bootstrap in the way that several other tutorials had done - I put the application.css.scss file back to its normal application.css file with all of the default contents that appear there, and then created a new file that I called styles.css.scss and put in the #import "bootstrap"; there and it loads it just fine.
I contacted a mentor of the program teaching the tutorial. He downloaded my source code from my github repo and saw exactly what I saw, though his project was working just fine, and no other students of the program had yet reported an issue doing it the way that the tutorial (and the bootstrap-sass docs) suggested.
Has anyone else ever run into this issue?