I have installed singularity with bower, and am using prepros as a compiler.
Attempting to compile my .scss file returns the following error:
File to import not found or unreadable: singularitygs
At the top of my styles.scss file:
#import "compass/reset";
#import "singularitygs";
config.rb:
require 'singularitygs'
relative_assets = true
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
Additional info (that might be relevant): I am only 'watching' my public folder with Prepros, so config.rb file is at the root of that folder.
Anyone know what the problem may be?
I have now got this working with the following steps:
► Install Ruby gems on my system, and installed singularity
using gems on the command line with:
gems install singularity
► Set Prepros to use system Ruby Installation (as opposed to built-in version) by going to Prepros Options -> Advanced Options -> Use Custom Ruby. (just enter 'ruby' if it's already in your path)
► Import compass, then singularity and breakpoint (the latter needed for responsive grids) in .scss file using:
#import "compass";
#import "singularitygs";
#import "breakpoint";
► Add config.rb file in project root and include the line:
require 'singularitygs'
Now it's all working sweet!
Related
I have managed to configure and get working bourbon with webpack. I just included the following on sass loader
&includePaths[]=' + bbPath
In a SCSS file I just do
#import "bourbon";
I now its working because I am calling mixins via scss files and I see the output, also webpack doesn't complain.
Problem is that in WebStorm IDE it states that the above #import line that bourbon cannot be resolved.
I tried doing
#import "~bourbon";
which makes WebStorm happy but the webpack fails with
Module build failed:
var path = require('path');
^
Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
in /Users/test/node_modules/bourbon/index.js (line 1, column 1)
maybe the fault here is WebStorm, is there some way to force WebStorm to understand that the #import bourbon is valid ?
I believe you can control the path of all scss files by telling Webstorm of the Root Resource Path.
WebStorm File Menu --> Preferences --> Directories --> Right click on your node_modules directory and check Resource Root option.
Once this is set then WebStorm IDE will know of your import #'bla-bla' files.
How to import bootstrap-sass to scss file? without compass, without rails, without etc.
I just only have 2 files, .html and .scss (which later will be generated to css).
I know there's a lot questions how to import bootstrap-sass but everything use rails or compass
I already gem install bootstrap-sass, but I don't know what shall I do afterthat
In your .scss file
// Import Bootstrap Compass integration
#import "bootstrap-compass"
// Import custom Bootstrap variables
#import "bootstrap-variables"
// Import Bootstrap for Sass
#import "bootstrap"
make sure you give proper path to your .scss libraries of bootstrap. and the ordering of the inclusion is important.
I'm trying to use Twitter Bootstrap for SASS, but at the moment it's not integrated into a Rails project, and I don't I need the stuff I'd get from Compass. I (think I) want a Ruby script that will generate my CSS, JS and Font files and put them in the right places, but having spent a couple of hours going round in circles with the docs, I can't figure this out.
I have a directory like:
site/
css/
bootstrap_variables.scss
application.scss
site.scss
fonts/
index.html
js/
css/bootstrap_variables.scss contains my custom variations on Bootstrap's default variables.
css/site.scss contains the site-specific, non-Bootstrap, CSS.
css/application.scss looks something like this:
#import "bootstrap_variables.scss";
// Import Bootstrap modules I need, but not others.
#import "bootstrap/variables";
#import "bootstrap/mixins";
// ... etc
#import "site.scss"
I've installed the bootstrap-sass gem. And now I want a script that does:
Process css/application.scss with SASS and outputs css/application.css.
Put the Bootstrap JavaScript I need into a single file in js/. (How do I specify which JS modules I need?)
If I'm using Bootstrap's icons, put the glyphicons fonts in fonts/.
If this sounds like madness, and I'm going about this entirely wrong, feel free to tell me that too!
And now I want a script that does:
I'm not sure why you need this script at all. Cause if you can run the script you also can install sass and run sass css/application.scss css/application.css. You can install all bootstrap's file in your site folder by running bower install bootstrap-sass and then run the sass command with --load-path option which should point to your bower_components folder. You can also copy / or link the required javascripts and font from the bower_components folder.
Or consider to use Gulp or Grunt to set up your build chain.
But you can use Sass programmatically indeed.
Process css/application.scss with SASS and outputs css/application.css.
Your script.rb should look something like that shown below:
/usr/bin/env ruby
require 'sass'
require 'bootstrap-sass'
sass_engine = Sass::Engine.for_file('css/application.scss',{
:style => :compact,
:syntax => :scss
})
output = sass_engine.render
File.open("css/application.css", 'w+') {|f| f.write(output) }
Notice that you also should have to integrate the autoprefixer.
Put the Bootstrap JavaScript I need into a single file in js/
After installing the bootstrap-sass gem you can read the javascript files from the gem (see: How to find the path a Ruby Gem is installed at (i.e. Gem.lib_path c.f. Gem.bin_path)).
So the get the content of the affix plugin you can use:
file = File.new(Gem::Specification.find_by_name("bootstrap-sass").gem_dir + "/assets/javascripts/bootstrap/affix.js", "r")
You you can read the required script, concatenate their content, minify and copy
If I'm using Bootstrap's icons, put the glyphicons fonts in fonts/.
As above, copy them from Gem::Specification.find_by_name("bootstrap-sass").gem_dir + "/assets/fonts
I have a burbon running on code kit. It is not problem, I cant get neat running?
when i put
#import "neat";
I get this error
Syntax error: File to import not found or unreadable: neat.
Load paths:
/
/Applications/CodeKit.app/Contents/Resources/engines/bourbon/bourbon/app/assets/stylesheets
on line 13 of /Applications/MAMP/htdocs/dev.wordpress/wp-content/themes/blankslate/style.scss
Use --trace for backtrace.
Since CodeKit version 1.8, Neat is built in. You don't need to install anything, just write this in your SASS/SCSS file:
#import "bourbon", "neat";
Make sure your 'Neat' folder is inside your stylesheets folder and use #import "neat/neat";
directory example:
[sitename] > [assets] > [css] > styles.css, [sass] > _main.sass, styles.sass, [neat]
Neat is a framework on top of Bourbon, so it does not automaticaly come with Bourbon.
Install Neat as following.
In Terminal:
gem install neat
Then cd to your Sass directory and run:
neat install
In your Sass file:
#import "neat/neat";
You also need to do:
#import "bourbon/bourbon";
before:
#import "neat/neat";
so your final scss file should start with(in the same order):
#import "bourbon/bourbon";
#import "neat/neat";
I have foundation installed and when I edit and save the app.scss file it creates a "app.css" and a "config.rb" file in the sass folder of my project. when I open that "app.css" file I get this
Syntax error: File to import not found or unreadable: foundation/common/ratios.
and then under that I get this:
File to import not found or unreadable: foundation/common/ratios.
Load paths:
/Applications/MAMP/htdocs/WebApp02/sass
/Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets
Compass::SpriteImporter
on line 1 of /Applications/MAMP/htdocs/WebApp02/sass/_settings.scss
from line 2 of /Applications/MAMP/htdocs/WebApp02/sass/app.scss
and then a bunch of paths to my gems.
It never created an app.css and config.rb file in my sass folder before I was wondering if anyone can explain why that is happening. Compass still complies to app.css in the "stylesheet" folder but I would like to fix this to keep from any future errors from happening.
config.rb file looks like this
require 'zurb-foundation'
Require any additional compass plugins here.
Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded or :nested or :compact or :compressed
To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
I was having same error in my project with sinatra. It was after upgrading from foundation 3.2.5 to version 4.0.2.
I realized that 'foundation/common/ratios' is not in the zurb-foundation gem anymore.
I had another error on "foundation not found or unreadable" so I had to modify also my Gemfile requiring 'compass' gem before zurb-foundation
gem 'compass'
gem 'zurb-foundation'
With foundation 3.2.5 'compass' wasn't explicitly required in Gemfile, but now it is and if you look at the zurb-foundation.rb code (in your ruby gemset), you can see:
if defined?(Compass)
Compass::Frameworks.register("foundation",
:stylesheets_directory => File.join(root,"scss"),
:templates_directory => File.join(root,"templates")
)
end
For this reason if in the project compass is not defined before zurb-foundation, zurb-foundation.rb doesn't expand the path including the scss folder.
I hope that my experience of today, may help you.
Best regards,
Roberto
I couldnt get this to work (rails 3.2.12 with asset pipeline and gem "compass-rails" and/or gem "compass") so I just locked onto 3.2.5
gem 'zurb-foundation', "= 3.2.5"
i had these same errors when trying to update a foundation 3 website using visual studio Express 2010. Express does not allow the use of the Mindscape extension tool.
so this is what worked for me a few times now. i basically start with a new webfolder using compass to create the folder. I don't waste my time trying to update because this seems to work for me. And its common to back up before a version update anyway.
from the root folder above your website. (i use the vs default path) so from the command line in rails i cd to this path
> cd C:\Users\georgegargoyle\Documents\Visual Studio 2010\WebSites\
*note if you are ungrading from foundation 3, and you only use ruby for foundation, you very well could have an old version of sass which the new foundation will need. i have not known it to hurt to just uninstall and reinstall sass
which is
> gem uninstall sass
>
> gem install sass
i think if it asks you the version of sass and you do not know
type the 5th option as text not the number 5 ... all versions ??
then.. type the number 5
you may get two warnings so i just hit y or yes twice.
anyway, from the websites folder type
compass create yournewfolder -r zurb-foundation --using foundation
you should see cool Woot! there it is then
> cd yournewfolder
to move into the project folder then
gem install compass
gem update compass
gem install foundation
gem update foundation
the documentation for foundation is below and i am new to this so this is not necessarily best practice, just what worked for me. Thanks to gekorob above I think i learned, which i suspected, that the order you run these commands matters because of the versions you have installed. ruby, compass, sass, foundation and visual studio.
Which i suspect can lead to problems if thinks get switched around . and would lead you here.
http://foundation.zurb.com/docs/sass.html
hope this helps and that you see lots of this.
http://www.ipaad.org/images/Step105.jpg