With SASS you are required to create a config.rb which manages the location of the app. I've recently changed the name of this file to "sass_config.rb" and can't figure out how to change the default of "compass watch" so that it finds my renamed file.
To clarify, when I run the following command compass correctly finds the file and continues with its normal behavior:
compass -c watch sass_config.rb
But when I run:
compass watch
It says:
Nothing to compile. If you're trying to start a new project,
you have left off the directory argument.
How can I fix this behavior so it sees the file has been renamed by just running "compass watch"?
The configuration filename cannot be arbitrarily modified. It is hard coded within Compass to be in one of 5 locations (soon to be 4).
https://github.com/chriseppstein/compass/blob/192107cb4f17bef52fdd8c0d961fe77f3edb44c4/lib/compass/configuration/helpers.rb#L137
# TODO: Deprecate the src/config.rb location.
KNOWN_CONFIG_LOCATIONS = ['config/compass.rb', ".compass/config.rb", "config/compass.config", "config.rb", "src/config.rb"]
Just create a compass project by
compass create
after that you copy the OLD config.rb content to the created one from copass.
Now try
compass watch
Related
I'm a complete beginner with SASS!
I have a custom built WP site which uses SASS.
When I try to edit any styles inside the .SCSS files these changes do not show on the frontend.
I'm using VS Code editor with the "Live SASS compiler" add-on but still when I make changes they do not reflect on the front end.
I'm clearly missing something here but really don't know where to start.
All I want to do is make changes to the styling of the site!
Thanks
You will need to ensure that SASS is installed on your machine - check out the offical install link.
Once SASS is installed, the rest of this answer will involve using the command line with some basic commands.
Lets assume your CSS and SCSS/SASS folders are arranged like so:
C:/Users/Me/development
/wordpress/wp-content/themes/my-theme/assets/css
/wordpress/wp-content/themes/my-theme/assets/scss
Open up your preferred command line interface - like PowerShell or Command Prompt. First of all, check SASS is installed by typing the following command and hitting enter:
sass --version
You should get a number back - if not, you will need to run over the installation instructions again and make sure you did everything correctly.
If that's working as expected, you will now need to navigate to the directory containing your assets. When you load your command line interface, you should be inside your user or home directory - in this example that will be C:/Users/Me. If using PowerShell, you will see your current working directory before the flashing caret.
You can use the change directory command - cd - to navigate to your themes assets folder. Using the above example filepath:
cd development/wordpress/wp-content/themes/my-theme/assets
Once inside this directory, you can run the SASS --watch command to watch the directories for changes and compile upon save:
sass --watch scss:css
The above watches the SCSS folder and puts the compiled CSS in the CSS folder. Once you're done editing, hit CTRL/CMD + C inside your terminal (command line) and then Y to stop watching the SCSS files for changes.
Attempting on a Mac with the latest version of Yosemite
I'm using the latest version of sass to refactor my site. I'm setting up watch command via the command line. my directory setup has a scss folder with the main css stylesheet cloned as .scss. and no css folder.
When I attempt the sass --watch scss:css command while in the main project directory folder, I've been told that, if there isn't one present, a css folder should be generated and a cloned .css file should be created along with a map file. Command line tells me >>> Sass is watching for changes. Press Ctrl-C to stop. however, changes are not being recorded.
I've tried updating my gems and uninstalling/ reinstalling sass, but nothing seems to be working.
Just tried this - the css folder doesn't get autogenerated. You need to generate it yourself. From there on, you should be good to go.
So if you are in the main project folder with subfolders called scss and css and you have, for example, a main.scss file in the scss directory, you can run the command exactly as you specified and everything should work as specified.
this is my dir structure
css/
sprites/_sprite.scss
scss/important.scss
scss/file1.scss
...
scss/file5.scss
scss/file6.scss
scss/file7.scss
scss/file8.scss
scss/file9.scss
scss/file10.scss
I want to be able to use
compass watch
to monitor changes to scss/important.scss file ONLY.
I know about
compass watch scss/important.scss
But I want to achieve the same just using a config file conf.rb so I can use compass like that
compass watch
Why I want to do this? Because I want to run compass via Guard. I know that in Guard I can watch certain files but it doesn't help me as compass always rebuilds all the scss files regardless of what Guard watches.
The reason I want to build only one scss file is because I use compass to generate PNG sprite and it takes 5 seconds for each scss where that sprite is imported. Way too long to use Guard with LiveReload (11 x 5s !!!).
prefixing the other SCSS files with "_" is not an option.
I just want compass to watch one file without having to specify this file as a command line argument
OK, I have two ideas maybe can help you.
move your sass files to another directory except for main.scss, name that directory whatever you want, for example: includes. Then put additional_import_paths = 'path/to/includes', leave sass_dir as it used to be. Finally in your main.scss import other files. Now, compass knows the dependencies for main.scss but won't compile those files because they stay in an independent directory.
But there's a littler issue left: how to compile them in production environment? Well, compass allows us to specify environment variable like environment = :production (and its default value is :development). With this help, you can write your sass_dir as sass_dir = (environment == :production) ? 'path/includes/main' : ['path/includes/main', 'path/includes/others'], and execute command: compass compile -e production at the final stage.
Write a bash alias like: alias mycompass="compass watch scss/main.scss", and you know it. use mycompass for your own work, leave compass as it should be.
What I eventually did was:
I run
compass watch scss/important.scss
in one console and
guard -i
in another console. I set up Guard to watch on CSS file cachanges and do LiveReload. I removed compass from my guard configuration. Now it all works as I expected except I have to keep two terminals open.
A while ago I was using compass to generate stylesheets from sass for a project.
Recently I returned to that project. I went to my sass directory and did "compass watch --debug .:."
This generated the error "You must compile individual stylesheets from the project directory".
I discovered that there was no config.rb in the directory. So I recreated one. It looks like this:
http_path = "/"
css_dir = "/css"
sass_dir = "/css"
images_dir = "/img"
javascripts_dir = "/js"
preferred_syntax = :sass
However, all of my attempts to use compass result in the same error, no matter what values I put in the config.
How do I get compass to actually process my sass?
just came across this problem too, and it has already been answered in the comment by Arnaud Valle.
But just for clarity, and people later searching.
Just creating a config.rb will not work, as compass does not recognise it.
The answer is just switch to your project directory(root) and then run
compass init
This will then create you a "working" config.rb, and two directories called sass, and stylesheets, in the sass directory will be a couple of start scss files.
If you do not want them, or want to use different directories, you can of course now edit your freshly created and working config.rb, and change your directories (and then delete the old automatically created ones)
Oh and i suspect your js will not be in a folder javascripts, so edit that to in the config.rb
Anyway having done that(or not) you should then be able to run
compass watch
and all should be good , i.e. your scss files get compiled to css files
As an alternative that I have not tried, but theoretically
compass compile [path/to/scss]
should work too, if you don't want to init compass
More information to be found in the compass documentation here
and to go completely over the top, if this is something you find yourself doing often, and hate the defaults then edit/add the following to your ~/.bash_profile
alias compass_init="compass init --syntax=sass --css-dir=css --javascripts-dir=js"
I usually have my config.rb in my project directory (or root) rather than the sass directory.
Folder structure would be like this:
config.rb
--- css
--- sass
Also your css_dir and sass_dir have the same value, which could lead to your issue as well.
Remove the "/" in front of your directory names.
This error occurs when your source path is incorrect. In your case, your directories have an extra "/". Removing them should fix your problem.
As others have said, creating a config.rb with compass init will fix it too.
Note that Config.rb is not necessary when using Grunt or similar runners that run compass. That might be how your project was running before without the config.rb file. The runner starts compass with all the paths and options in Gruntfile.js. Having paths/options in both Gruntfile and config.rb might cause problems.
Had this problem on windows 7 using Symfony with Gulp, i solved it using absolute paths like this:
gulp.task('compass', function() {
gulp.src('c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/sass/*.scss')
.pipe(compass({
config_file: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/config.rb',
css: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/stylesheets',
sass: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/sass'
}))
.pipe(gulp.dest('c:/wamp/www/mnv/web/css'));
});
For anyone looking to compile SCSS without making a whole project (e.g., for a one-off page), you can just create a config.rb, but it needs at least two parameters: css_dir and sass_dir. (touch-ing it is not enough).
A minimal config.rb:
css_dir='.';sass_dir='.'
This effectively creates a compass project for the purpose of compiling simple files. You'll have to include the rest of the params if you want to use sprites, etc. Assuming compass can write to the directory, it'll create the .sass-cache directory once you run compass compile or compass watch for the first time.
It's also important to note that compass commands must be run from the directory with config.rb, or you'll get this error.
Finally, if you just want to take advantage of simple SASS features (and not Compass framework components), straight SASS is often simpler:
sass --watch foo.scss:foo.css
I experienced the same problem using gulp-compass-compile. Fixed that by changing srcDir option (that converts to --sass-dir option in compass compile call) for compass function from ./src/scss to src/scss. Hope that helps someone.
I'm circumventing the built-in Yeoman server and severing files directly from the /app directory. Since Yeomen's server manages compass/sass compliation I'm having a hard time running compass outside of it. Running the compass cli directly doesn't work; it's not aware that it's in an existing compass project. So I get:
$ compass watch /app (or /app/styles)
Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Has anybody had experience getting this to work?
You have to move your Compass settings out into a config.rb file to use the Compass CLI.
However, you can easily run the Compass grunt task individually like so grunt compass to compile, or grunt watch to automagically compile on file changes.