How to Compile an Existing Project Because Compass Can't Find It

Unable to compile an existing project because Compass can't find it

When you use compass create [directory_name], Compass creates your project within ./[directory_name] relative from your current directory (running compass create without the directory name would have created the project in the current directory). In order to compile or watch a Compass project, you need to do either of the following things:

• Tell Compass where your project is via compass compile [path_to_config.rb]
• Change to the directory where config.rb is found and run compass compile

Alternately, you could move your config.rb to where you want to run your command. Just make sure you edit the paths to directories configured within said file.

Implement Compass into an existing Sass project

Yes you need to make a custom config.rb and place it in the root directory of your site. It will look something like this.

# Require any additional compass plugins here.
require "susy"
require "sass-globbing"
require "breakpoint"

#Folder settings
project_type = :stand_alone
http_path = "/"
relative_assets = true      #because we're not working from the root
css_dir = "css"          #where the CSS will saved
sass_dir = "scss"           #where our .scss files are
images_dir = "img"    #the folder with your images
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded # After dev :compressed

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# Obviously
preferred_syntax = :scss

# Sourcemaps for Chrome DevTools

sass_options = {:sourcemap => true}
# sass_options = {:debug_info => true}
sourcemap = true

Please note I use a few things like susy and breakpoint so if you dont use those remove the requires from the top of the config.rb file.

Since the config.rb file is in your root directory then your css, scss, js folders are all relative directories.

Once you have created and saved this just go to your terminal navigate to your sites directory and run compass watch.

Please note you will have to take your CSS files you already have and place them in the scss folder. Otherwise compass will just overwrite your CSS and you will also have to rename them to .scss I would save backups first so you dont lose anything

How to use compass in phpstorm?

First of all, the question that you had linked is about enabling support for Compass-style imports, and it is a workaround that does not work for every project.

Your question is about a different thing: compiling Compass projects.

Both issues will be addressed in the 7th version of PHPStorm, which is not going to be released soon: the 6th version has just been released. For now, there's a number of workarounds.

Compiling Compass projects with PHPStorm manually

1. Go to the External tools section of PHPStorm IDE Settings.
2. Create a new external tool. Name it "Compass compile manual" or similarly.
3. Set the Program to point at your Compass binary. On Windows it's like C:\Ruby193\bin\compass.bat, on Linux and Mac it can be simply compass. But if you're using RVM, then the Program should be bash.
4. The Parameters field should be compile for all OSes, unless you're using RVM. For RVM the Parameters should be set to –login -c "compass compile".
5. The Working directory field should be set to $ProjectFileDir$.

Manual compilation can be launched from the Tools menu. You can also assign a hotkey to run it quicker. Make sure that hotkey does not collide with an existing one.

Making PHPStorm compile your project whenever you save changes

1. Make sure you have the very latest Early Access Preview version of PHPStorm. You can download it from here.
2. Make sure you have the File Watchers plugin installed. Go to the Plugins section of PHPStorm IDE Settings, look for File Watchers. If it's not on the list, install it via
   Browse repositories and restart PHPStorm.
3. Open your project in PHPStorm if you haven't done it already.
4. Go to the File Watchers section of PHPStorm Project Settings.
5. Create a new File Watcher. Use a custom template. Name your watcher "Compass compile on save" or similarly.
6. Set the File type to either SCSS or SASS, depending which one you use in your project.
7. Leave the Scope as "Project files"
8. Set the Program to point at your Compass binary. On Windows it's like C:\Ruby193\bin\compass.bat, on Linux and Mac it can be simply compass. But if you're using RVM, then the Program should be bash.
9. The Arguments field should be compile for all OSes, unless you're using RVM. For RVM the Arguments should be set to –login -c "compass compile". UPD: @ezekiel-victor suggests this to be: –login -c "compile --sass-dir=$ProjectFileDir$ --css-dir=$ProjectFileDir$".
10. The Working directory field should be set to $ProjectFileDir$.
11. Disable Check for syntax errors.
12. Leave the rest blank and save.

Now whenever you save changes to any of your SCSS or SASS files, PHPStorm will tell Compass to compile the project.

UPD If you're using Bundler (there's Gemfile in your project and you do bundle install to fetch dependencies), you shoud use bundle exec compass compile instead of compass compile. This means that you have to use the bundle executable (bundle.bat on Windows) instead of compass (compass.bat) and adjust the Arguments field accordingly.

Running compass watch manually in OS console (recommended)

The problem with running compass compile is that it's slow as it recompiles the whole project every time it is executed.

Instead, you can run a compass watch command manually in the project folder using your OS console. Compass Watch will constantly monitor your project for changes. When changes are noticed, it will recompile only the modified part, which is much faster.

Compass Watch is smart enough not to monitor every file in your project. It only monitors non-partial files (e. g. screen.scss) and partials (e. g. _layout.scss) that are imported by any non-partial file or by imported partials recursively.

If you work with your project over a network filesystem (e. g. when using a virtual machine or a development server to run your code), compilation and tracking changes become too slow. So the best option when using remote/virtual machine is to run compass watch on that machine so that it tracks changes locally and not via a network file system.

Reanimating Compass

Compass caches it's own work to make compilation faster. Sometimes the cache becomes inconsistent with project contents. This results in Compass reporting all kinds of weird errors and refusing to compile your project.

Once you feel that Compass reports an error that is not true, execute compass clean and recompile your project. Cleaning will purge Compass cache and complied files, so that it starts from scratch.

You can run compass clean manually in console or add it as a PHPStorm External Tool.

---

Related Topics