Rails / Compass / Sass Compile Super Slow

Question

I recognize that this issue has been brought up a thousand times, and I feel like I have read most other posts on it but I still can't seem to figure this one out.

I'm just starting with Ruby on Rails and am trying to use Compass/Sass/Suzy in my project. They all work (mostly) but am having some issues with the compass compiler.

First off using bundle exec compass watch (with and without --poll ) does nothing. (this is assuming I understand the point of this command which is that it re compiles on the fly and I don't have to refresh the page to see my changes but I could be wrong)

Secondly when I do refresh the page after a change to my .scss file it takes 30-35 seconds for the compile to finish and reload the page. This is unbearable. I've read that there are some issues with the latest 'compass-rails' but most of the posts that said this were a few years old. Does the latest compass-rails work flawlessly or is there a common issue that causes this?

Since I am just learning I only have a one controller/view/scss file so I'm pretty positive I don't have any dependency loop issues.

Here is how I have the project currently set up. (I think it is setup properly but maybe someone can point out something I've done wrong.)

1. I created a new rails project and generated a 'welcome' controller
2. Modified my application.rb

application.rb

require_relative 'boot'

require 'rails/all'
require 'susy'
require 'compass'
require 'breakpoint'
require 'normalize-scss'
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module PersonalWeb
  class Application < Rails::Application
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.
  end
end

3. Modified my Gemfile

Gemfile

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.3.18', '< 0.5'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'susy'
gem 'compass-rails'
gem 'breakpoint'
gem 'normalize-scss'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platform: :mri
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

4. Run the command bundle
5. Renamed application.css to application.css.scss

application.css.scss

@import "compass";
@import "breakpoint";
@import "welcome.scss";

6. Added some HTML and sass to my welcome.erb and welcome.scss respectively.

As a further note I had that issue where on each compile compass threw a deprecated warning. I followed the advice here which seemed to stop it. Doubt it is involved but to prevent my ignorance getting in the way of a solution I figured I'd mention it.

EDIT

I figured I'd throw in my welcome.scss just in case there is something stupid in there I've done.

welcome.scss

@import "normalize";
@import "partials/variables";
@import "partials/layout";
@import "partials/mixins";
@import "grids";

header {
  height: 100px;
  background: $blue;
  color: $white;
  margin-bottom: 10px;
  padding: 10px;
}

.wrapper {
  background: $white;
  margin: 0 auto;
  max-width: 900px;
}

nav {
  text-align: center;

  ul, li {
    padding: 0;
  }

  li {
    background: $gray;
  }

  a {
    text-decoration: none;
    color: $white;

    &:hover {
      color: $yellow;
    }
  }
}

.first-row {
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
}

.first-row .first {
  background: $yellow;
  height: 100%;
}

.first-row .second {
  height: 100%;
}

.first-row .second div {
  background: $orange;
  height: 100%;
}

.pic-gallery {
  div {
    background: $violet;
    height: 100%;
    margin-bottom: 10px;
    padding: 10px;
  }
}

.content-bar {
  div {
    background: $green;
    height: 100%;
    margin-bottom: 10px;
    padding: 10px;
  }
}

footer {
  height: 100px;
  background: $blue;
  color: $white;
  margin-top: 10px;
  padding: 10px;
  clear: both;
}

header {
  @include full;

  .logo {
    @include span(wide 1.75);
    @include border-radius(0px);
  }

  h1 {
    @include span(last 2);
    @include breakpoint((max-width 50em)){
      @include span(last 2);
    }
  }
}

.wrapper {
  @include container;
}

Edit 2 Thought I should mention I am on Windows 10.

Answer 1

The compass watch command is used when you are using compass on a bare bones project or some framework without an assets pipeline. It watches the file system for changes and compiles your SASS files to CSS. It can be used with livereloadx but thats not the main purpose.

You don't want to use compass watch with Rails. Rails instead has a built-in assets pipeline which does the job better.

If you still want to use the other features of compass you should use the compass-rails gem.

1. Add the gems to the gemfile

gem 'sass-rails'
gem 'compass-rails'

Then run bundle to install the gems.

2. Setup your application.scss

If you have a application.css file rename it application.scss . Note that is should not be named .css.scss . Remove any sprockets directives which are comments that look like:

#= require 'foo'

Instead use the SASS @import directives:

@import "compass"

Then follow the steps in the readme to setup the extensions such as susy.

Answer 2

Try not importing the whole of compass.

Instead import just the module you want, ie:

@import "compass/typography/links/link-colors"

• Taken from How can you speed up the Rails Asset Pipeline precompile process?