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
Related
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.
I'm trying to add Fezvrasta material design for bootstrap to my rails app but unfortunately without success.
Can anyone give me some help on how to do this?
Both rails assets and this SO answer didn't work.
On the first I got the following error message:
File to import not found or unreadable: bootstrap-material-design.
And on the second one this one:
'It's not clear which file to import'
EDIT
so for the first link I did this
gemfile
source 'https://rails-assets.org' do
gem 'rails-assets-bootstrap-material-design'
end
application.css.scss
I tried both
#import 'bootstrap-material-design';
and
*= require bootstrap-material-design
on the second one I run the command
bower install bootstrap-material-design
and after on my application.css.scss I did
#import '../../../vendor/bower_components/bootstrap-material-design/sass/bootstrap-material-design';
Any tips on how to solve this?
Thanks
I am working on my first ever Rails 4 app and have to integrate FlatDream theme in it. So far I could not find some easy to use and decent tutorial to stylized a Rails app based on a themeForest theme. Can you guide some pointers?
Here are the steps.
Install gem "bootstrap-sass" if you don't already have it. You can install it by adding the following line to your gem file.
gem "bootstrap-sass"
bundle install
Next create a file named custom.css.scss (app/assets/stylesheets) and add the following two line to it
#import "bootstrap";
#import "bootstrap-responsive";
Next add the following to app/assets/javascript/application.js
//= require bootstrap
Now you need to convert your your css files of your theme to scss. There are converters which can help you with this. Google is your best friend here. Put the scss files image files etc at right places. If the theme uses some custom javascript you need to add it to your project in standard manner.
You are good to go.
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.
I'm trying to start using compass to manage sprites in my Rails project. Following the "Basic Usage" section of the Compass sprites tutorial, I created sprites.css.scss in my stylesheets directory, with the following lines:
#import "compass/utilities/sprites";
#import "sprite_icons/*.png";
#include all-sprite_icons-sprites;
I also created a directory "sprite_icons" under app/assets/images, and dumped a couple of png files there. When I try to load a page in my rails app, I get this message:
File to import not found or unreadable: compass/utilities/sprites
I decided that maybe the compass-rails gem I installed makes that import unnecessary, so I tried removing it, but then I get this error:
File to import not found or unreadable: sprite_icons/*.png. Load paths: /[...]/app/assets/images
I checked permissions on the new directory and they are readable. It looks like it has the right load path to find my sprite_icons directory.
Any suggestions?
It turns out I hadn't done anything to tell Rails about the existence of sass-rails or compass-rails. So, I needed to add the following to (a file required by) config/application.rb:
require 'sass-rails'
require 'compass-rails'
and now the sprites are generated.