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.
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 have a rails engine that's been working great for the past year. I decided it was time to add some automated testing to the application and I'm running into a problem getting the dummy app to run.
I'm using rspec in my engine and I have the dummy app at spec/dummy. My original engine was NOT generated using the rails plugin new command. I created it using bundle gem and built it up over time by adding the required files. To get the automated testing working, I created a new engine using rails plugin new so I could see how the dummy rails app is created. I copied all the relevant files into my new engine and almost everything works great. I'm able to execute some simple rspec examples against the dummy app, however, these are very basic examples which boot the dummy app, but don't actually hit any controller actions.
I wanted to see if I could run the dummy application so I could start adding more interesting rspec tests using capybara. My engine adds some controllers and views to its host rails app, so I should be able to go to the relevant paths in the browser and have the views load. When I change to the spec/dummy folder and start the rails server, the app boots fine. However, as soon as I try and bring up a page, I get the following error:
File to import not found or unreadable: font-awesome
Again, the engine has no problem running in a regular Rails application. It's something about this dummy app that isn't right. The spec/dummy/config/application.rb file has:
require "my_engine"
If I understand correctly, this should require the lib/my_engine.rb file and inside that file I have:
require "font-awesome-rails"
So at this point, my_engine should be loaded along with all of it's component gems like font-awesome-rails. I see references to font-awesome in the $LOAD_PATH so this appears to be working.
The error is occurring because the engine has an app/assets/stylesheets/my_engine.scss file which has:
#import "font-awesome";
#import "another-file-from-another-engine-I-wrote";
This file gets loaded because the app/assets/stylesheets/application.scss file of the dummy has:
#import "my_engine";
So, the dummy app imports the scss file in the engine, which in turn pulls in the font-awesome stylesheets. This technique works great for regular Rails applications, but it seems to be failing for the dummy app and I'm stumped as to why.
This isn't a font-awesome issue. If I comment out the #import "font-awesome" inside my_engine.scss, I get the exact same error on the next component asset:
File to import not found or unreadable: another-file-from-another-engine-I-wrote
I've triple checked the files in my_engine to make sure they would match what was generated if I had originally created the gem using rails plugin new. It seems like the dummy app isn't able to load the assets from the sub component gems. What am I missing?
I figured it out. Nothing was telling the engine to load the sass-rails gem. Adding this to my gemspec fixed everything:
spec.add_development_dependency "sass-rails", "~> 5.0.4"
'sass-railsis added to theGemfile` for new Rails applications which is why everything worked fine in regular rails app.
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
Is it some possible way to make work Bourbon with wagon of Locomotive CMS ?
I added a bourbon and neat gems to Gemfile of wagon but after bundle install and starting server i got this :
File to import not found or unreadable: bourbon.
Load paths:
/Users/alex/workspace/locomotive-test/public/stylesheets
/Users/alex/.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/Users/alex/.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
Compass::SpriteImporter
I have found that getting Locomotive to work with Bourbon (or Susy or any addon SASS gem) is a two-stage problem. First, the resources must be loaded correctly in the Wagon gemfile, and then they must be #imported in every dependent file to compile correctly when pushed to the Engine.
To get Bourbon to import correctly into Wagon (1.5.1), add Bourbon to the gemfile in the :misc group per the sample pattern:
group :misc do
# Add your extra gems here
gem 'bourbon', require: 'bourbon'
end
Then, just run $ bundle install and it should work fine. I found that I didn't need to do $ bourbon install and have the actual .css files in my public/stylesheets folder. The gem was enough for my Wagon instance.
Pushing the site to Engine, however, can prove tricky. Wagon will compile the SASS files in an arbitrary order on push (reference: LocomotiveCMS Google Group). Consequently, the best DRY rails practice of having all your #import calls in one main sass file, and referencing only that file in a top-level application.css file won't work here:
./public/stylesheets
-application.css #requires self and main
-main.scss #imports all other stylesheets, normally where we'd #import 'bourbon'
/other_stylesheets
-variables.scss
etc. etc.
On push, Wagon won't understand that main.scss #imported Bourbon ahead of all other resources. So, it will usually fail with 'undefined mixin...'
To solve that, I still put variables.scss, mixins.scss, etc. in a folder (./public/stylesheets/base/ for instance) and call #import for those resources on every page specific stylesheet (posts.scss, etc.). In addition, any stylesheet that uses a Bourbon, Neat, Susy, whatever mixin has to call #import on that gem reference and the mixins and the variables... it has to be repeated in each dependent sheet.
./public/stylesheets
-application.css # requires self and main
-main.scss # imports all other stylesheets, normally where we'd #import 'bourbon';
/other_stylesheets
-variables.scss # might #import 'font-awesome';
-mixins.scss # #import 'bourbon'; #import 'variables';
etc. etc.
Unfortunately, this is NOT very DRY coding. In fact, there's probably a lot of bloat and redundancy that can be eliminated. So far, it's the most reliable method I've found for pushing my Wagon site to the Engine using these gems. That being said, if you're looking for a quick fix, rather than identifying each resource to #import for each page, you could make an import.scss stylesheet that calls Bourbon, Neat, what-have-you and just #import that import.scss resource into every other sheet.
The final catch (famous last words!), is that the Engine won't accept .scss or .sass files, despite the documentation. Pre-processor stylesheets have to be prepended with .css:
main.scss => main.css.scss
Otherwise, the Engine kick back an error "you are not allowed to upload..."
Hope that helps!
UPDATE:
I realized a couple weeks after posting this that the reason for the Sass troubles in Locomotive vs. other Rails apps: I was using old sprockets syntax in my application.css file.
So, the best method is to make as many Sass sheets partials as possible (prepend your filenames with an underscore -> _example.css.scss). Then, change the application.css to a Sass sheet -> application.css.scss. Finally, don't use any *= require calls like we used to with Sprockets. Instead, we can and should use the Rails best practice of Sass #import calls. You can even glob your partials in subfolders, if so inclined. The reason is, Locomotive installs sass-sprockets and sass-rails gems by default. These gems enable #import in the application.css.scss file with sprockets/asset pipeline. By using Sass partials for subsequent stylesheets, the compilation for application.css.scss will have its own domain and call the partials into it, instead of compiling each subsequent sheet in its own domain. Otherwise, you would probably see wagon push failing with 'unknown mixin...' on the first sheet outside of the main application sheet. If you order your partials in the correct order of dependency (which file does every sheet need? That goes first...), this method also has the added benefit of keeping your compiled application stylesheet very DRY.
Cheers!
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.