I have been struggling with SASS and Compass on my Mac OSX for the last few days.
I have a setup like below (this is as accurate as I can make it).
Ive only done 1 site but there are around 40 with identical structure below proxysite1.com
/Library/WebServer/Documents
/WebProxy-Network
/Global_Assets
/_alerts.scss
/_badges.scss
/_breadcrumbs.scss
/_button-groups.scss
/_buttons.scss
/_carousel.scss
/_close.scss
/_code.scss
/_dropdowns.scss
/_forms.scss
/_grid.scss
/_labels.scss
/_print.scss
/_bootstrap.scss (all the files above import into this one and will use shared by all the sites)
/Asia
/USA
/EU
/UK
/www.proxysite1.com
/scss
_variables.scss
_overrides.scss
styles.scss (this imports _sass-bootstrap.scss, _variables.scss & overrides.scss)
/css
styles.css (ok so this should be the FINAL output unique for each site)
/js
/images
/index.inc.php
/index.php
/config.rb
Inside my config.rb I have these settings:
# Require any additional compass plugins here.
load "../../Global_Assets/Bootstrap3"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
Now inside my /scss folder file styles.scss
I have the following:
// Site Overrides
#import "overrides";
// Site Variables
#import "variables";
// Bootstrap3 SASS Framework
#import "bootstrap";
Right so that took a while but I want to get some good advice on where i'm going wrong ;)
Now when I visit this path via terminal
/Library/WebServer/Documents/WebProxy-Network/UK/www.proxysite1.com/
and run the command "compass watch" I get the following message:
Ants-MacBook-Pro:www.antproxy.com Ant$ compass watch
>>> Change detected at 10:17:28 to: styles.scss
error scss/styles.scss (Line 24: File to import not found or unreadable: sass-bootstrap.
Load paths:
/Library/WebServer/Documents/WebProxy-Network/UK/www.antproxy.com/scss
/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)
overwrite css/styles.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.
So hopefully this is enough info to get some good insight in to where I'm going wrong, hopefully its been clear and I'm on the right path :)
BTW the idea was to have it so I can specify different variables for each site allowing me to change colors fonts etc but share layout styles and functionality styles.
(I would have posted this as a comment however I do not have the priviledges.)
I suspect that you may have gotten some of your indentations wrong in your post as running "compass watch" in the "www.proxysite1.com" directory while the config.rb file is within "assets" wouldn't work as compass wouldn't be able to find the configuration and would assume that no compass project existed.
Regardless, how are you including Bootstrap 3?
If you are not already using it already, I would recommend trying Thomas McDonald's bootstrap-sass. Available here: https://github.com/thomas-mcdonald/bootstrap-sass
UPDATE:
Why are you including Bootstrap 3 like this?
// Bootstrap3 SASS Framework
#import "sass-bootstrap";
If you have included the correct require statement in your config.rb (inc. below) then you should be able to import it like this mate:
// Bootstrap3 SASS Framework
#import "bootstrap";
Inside of config.rb, you should have this at the top:
# Require any additional compass plugins here.
require 'bootstrap-sass'
load "../../Global_Assets"
Related
I was trying to run a github page with Jekyll theme,and the website runs fine locally. However, when I try to urn in on htttps://username.github.io, GitHub cannot build the website.
I got the following error message :
Your site is having problems building: Your SCSS file myblog/assets/main.scss has an error on line 1: File to import not found or unreadable: minimaless.
The main.scss :
---
# Only the main Sass file needs front matter (the dashes are enough)
---
#import "minimaless";
It seems to be the path to the .scss file expected by GitHub is different from where the Jekyll theme put it. I checked some posts mentioned that I should put the absolute path of .scss in _config.yml file.
It seems to be the path to the .scss file expected by GitHub is different from where the Jekyll theme put it. I checked some posts link mentioned that I should put the absolute path of .scss in the directory of urlbase, which is /myblog. But I am not familiar with ruby, so I am not sure how should I do it.
The folder structure is like this :
myblog/
- assets/
- main.scss
- _sasss/
- minimaless.scss
- minimaless/
- basic.scss
- layout.scss
- hight-lighting.scss
- _config.yml
This is my GitHub page folder :
https://github.com/Po-Hsuan-Huang/Po-Hsuan-Huang-github.io
The issue could be because your source contents are within a subdirectory myblog. Try moving all the contents to the root of your repository.
It could also be because of the following in your config file:
theme: minimaless
#remote_theme: brettinternet/minimaless
theme: minimaless is not supported on GitHub Pages. Comment it out.
And finally, _site directory should not be checked into version control. Delete it from your repository and then add an entry for it in your .gitignore file.
I have a jekyll project that looks like this:
- assets
-- css
--- main.scss
-- sass
--- base
---- _root.scss
--- vendor
---- normalize.scss
main.scss includes the files
---
---
#charset "utf-8";
#import 'vendor/normalize';
#import 'base/root';
Here are the config.yml-settings that might be relevant
# Sass settings
sass:
add_charset: true
sass_dir: assets/sass
style: :compressed
# Build settings
exclude:
- Gemfile
- Gemfile.lock
- package.json
- README.md
- CNAME
- node_modules
- assets/sass
The sass works and gets generated into the right folders, but it seems like sass only listens to updates of main.scss when I run jekyll serve I have tried putting all files in /assets/sass/ and also putting all files in assets/css/, but none of these things work either.
I moved the files from /assets/css/ to /_css and removed the setting sass_dir: from config.yml, this worked, not sure why, but it seems that jekyll only listens to sass changes in that folder. Hopefully this is heplpful for someone!
I have this structure of SCSS:
app
styles.scss
bower_components
_colors.scss
_fonts.scss
sass
index.scss
styles.scss:
#import "sass/index";
index.scss:
#import "bower_components/_colors";
#import "bower_components/_fonts";
app folder is set as working directory in File Watcher settings and is marked as "Resource Root" in WebStorm. However, transpiling fails with error:
error sass/index.scss (Line 3: File to import not found or unreadable: bower_components/_colors.)
I've read that #imports evaluated in SCSS
relative to current file location
relative to root location
But in my case it is obvious that Ruby transpiler doesn't do attempt to find files relative to root location. Is it a bug? Or I am doing something wrong?
I installed SCSS through Ruby and set up File Watcher according to https://www.jetbrains.com/help/webstorm/2016.1/transpiling-sass-less-and-scss-to-css.html
This is my File Watcher settings:
You will get exactly the same issue when running scss.bat in command line:
C:\Projects\prj>cd app
C:\Projects\prj\app>C:/Ruby193/bin/scss.bat --no-cache --update sass/index.scss
error sass/index.scss (Line 1: File to import not found or unreadable: bower_components/_colors.)
See https://github.com/sass/sass/issues/652: current working directory being automatically placed on the Sass load path is deprecated in 3.3. You need passing the load path explicitly with -I option to work with folders relative to the working directory. Like:
Hi everybody I'm new to learning Gulp and I can't seem to get over this hurdle. I am trying to compile my sass and I will set it to gulp-watch. It will work fine for a little while, but then it will show an error- the file is not found or unreadable.It looks something like:
events.js:154
throw er;// Unhandled 'error' event
Error: app/scss/main.sass
Error: File to import not found or unreadable: layout1
Parent style sheet: stdin on line 2 of stdin
I have tried to look on this site for the solution to my problem and I thought putting the includePaths would work (maybe I'm doing it wrong) but I'm still getting errors. Could someone please help me out?Here are some images of my project. Here is a link to some pictures: http://imgur.com/a/pQBHV
Looks like there are a few issues:
1) You should probably use the scss extension with all your files and update the sass task in your gulp file to watch for changes like so: gulp.src('app/scss/*.scss') or since, in theory, all files contained in that folder should be sass, you could do this instead: gulp.src('app/scss/*') which will watch all the files in the directory.
2) There's also an issue with the names of your sass files. You need to prepend the files you wish to import with an underscore so the compiler knows these files are partials.
So your sass files should look like:
_layout1.scss
main.scss
_normalize.scss
_styles.scss
And import the partials in main.scss:
#import 'normalize';
#import 'layout1';
#import 'styles';
More info http://sass-lang.com/guide#topic-4
I've just started with sass today and hit my first roadblock. I don't know how to use font-face inside my scss files. Here's what I've tried, inside my app.scss file:
//do I need this line? I have installed compass
#import "compass/css3";
#include font-face("myfont", font-files("myfont.eot", "myfont.woff", "myfont.ttf", "myfont.svg#myfont"));
And this is what I get rendered:
#font-face {
font-family: "myfont";
src: url('/assets/css/fonts/myfont.eot') format('embedded-opentype'), url('/assets/css/fonts/myfont.woff') format('woff'), url('/assets/css/fonts/myfont.ttf') format('truetype'), url('/assets/css/fonts/myfont.svg#myfont') format('svg');
}
My config.rb file:
http_path = "/"
css_dir = "assets/css"
sass_dir = "assets/sass"
images_dir = "assets/img"
javascripts_dir = "assets/js"
fonts_dir = "assets/fonts"
And my right now my file structure is this www.mydomain.com/nameofmyproject and inside I have a folder called assets that contains css, sass, img, fonts, js folders
EDIT: Since this seems to be an issue with the paths I will edit my question. I'm working on a subdirectory here and firebug shows me a 404 for my font files, with the following url: www.mydomain.com/assets/css/fonts So it's both ignoring that I'm on a subdirectory and that I changed my fonts_dir to be inside assets and it goes to the default, inside the css directory.
When updating your config.rb file, You have to restart compass watch. Took me hours to figure that out. Hope this helps someone.
Yeah my problem was a mix of issues, not restarting compass watch was not helping me debug the problem correctly and having a messed up installation was the problem at hand. I reinstalled and then started from scratch and it ended working just fine.