I have never used Compass before, although I've used Sass for a while. I'm getting the following error:
error sass/screen.scss (Line 9: File to import not found or
unreadable: sass/_globals.scss.
The _footer.scss file is in the same directory as the _globals.scss file but it is saying that it is being modified when I make changes in it. What am I doing wrong?
My screen.scss file.
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
#import "compass/reset";
#import "compass/css3";
#import "compass/layout";
#import "sass/_globals.scss";
#import "sass/_footer.scss";
This is my config structure:
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
# 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
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
I'm guessing that you need to change:
#import "sass/_globals.scss";
#import "sass/_footer.scss";
to:
#import "_globals.scss";
#import "_footer.scss";
Your sass config file already points to the sass subdirectory, so unless your files are in a sass/sass subdirectory that's probably the problem.
Related
I have successfully installed Sass and Compass-sass, but I'm having trouble importing Compass. showing this error ""Error: File to import not found or unreadable: compass/css3"
Here is my compass import
#import "compass/css3";
here is my config.rb
http_path = "../"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"
Please See attached Screenshot
Please help me guys what i have write wrong in my code
I am practicing sass in my code editor. When I tried to compile my sass file and built a watcher. I receive:
Jiatongs-MacBook-Pro:6_myLandingPage_starter jiatongli$ sass --watch sass:css
Error: Undefined variable.
background-color: $white
^^^^^^
sass/modules/_navbar.sass 3:21 #import
sass/modules/_modules-dir.sass 1:9 #import
sass/app.sass 3:9 root stylesheet
Because I cannoStackOverflow files here on stackoverflow, I link my github repository which is:
https://github.com/riederleeDEV/SASS-project.git.
It seems like the sass watcher cannot capture my file import and I do
not know where went wrong
Here is the command I used: sass --watch SASS:CSS(the command should not have any error)
After I checked the file, I discovered that there is nothing wrong with my app.sass import nor the typo. Just want to ask where I went wrong?
Try this:
<···· Move variables to top
#import "base/base-dir" |
#import "layout/layout-dir" |
#import "modules/modules-dir" |
|
#import "variables" ············
#import "mixins.sass"
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 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"
I've been messing around with Compass, using the Scout GUI, for a day now and sprites are driving me crazy.
Compass is creating the sprite but it seems the CSS is pointing to the wrong place.
The import statement looks like:
#import "images/icon/*.png";
And, here's how I'm calling it:
h1{
#include icon-sprite("social");
The link that is getting created in the CSS is:
http://localhost/images/icon-s25f42076dc.png
I would like it to be:
http://localhost/compass/images/icon-s25f42076dc.png
This is my config.rb:
http_path = ""
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
relative_assets = true
Change 'relative_assets' to false.
Figured it out:
Import path needs to be
#import "../compass/images/icon/*.png";