Rails/Compass/Sass编译非常缓慢

Question

我知道这个问题已经被提出了一千次，我感觉我已经读过大部分其他帖子，但我似乎仍然无法解决这个问题。

我刚开始学习Ruby on Rails，并尝试在我的项目中使用Compass/Sass/Suzy。它们都可以工作（大多数情况下），但是我在compass编译器方面遇到了一些问题。

首先，使用bundle exec compass watch（有或没有--poll）没有任何作用。（我理解这个命令的目的是实时重新编译，我不需要刷新页面就可以看到我的更改，但我可能是错的）

其次，当我在.scss文件进行更改后刷新页面，需要30-35秒才能完成编译并重新加载页面。这是无法忍受的。我读到最新的'compass-rails'存在一些问题，但是大多数说这话的帖子都是几年前的。最新的compass-rails是否完美无缺，还是有一个常见的问题导致这种情况？

由于我只是在学习阶段，我只有一个控制器/视图/scss文件，因此我非常确定我没有任何依赖循环问题。

以下是我当前设置的项目方式。（我认为它已经正确设置，但也许有人可以指出我做错了什么。）

1. 我创建了一个新的rails项目并生成了一个'welcome'控制器
2. 修改了我的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. 运行命令bundle
5. 将application.css重命名为application.css.scss

application.css.scss

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

我在welcome.erb和welcome.scss中添加了一些HTML和Sass代码。

另外需要注意的是，每次编译时Compass都会抛出一个已弃用警告。我按照这里的建议来解决它，似乎已经停止了。不确定它是否涉及到问题，但为了防止我的无知妨碍解决方案，我想提一下。

编辑

我想在这里放上我的welcome.scss，以防我在这里做了一些愚蠢的事情。

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;
}

编辑2 我应该提一下，我使用的是Windows 10。

- Nick

Answer 1

compass watch 命令用于在没有资产管道的裸项目或某些框架上使用 compass。它会监视文件系统的更改并将 SASS 文件编译为 CSS。它可以与 livereloadx 一起使用，但这不是主要目的。

您不应该在 Rails 中使用 compass watch。Rails 相反有一个内置的 assets pipeline 可以更好地完成这项工作。

如果您仍想使用 compass 的其他功能，则应使用 compass-rails gem。

1. 将 gem 添加到 gemfile

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

然后运行bundle安装gems。

2. 设置你的application.scss

如果你有一个application.css文件，请将其重命名为application.scss。请注意，它不应该被命名为.css.scss。删除任何看起来像这样的注释sprockets指令：

#= require 'foo'

请使用SASS的@import指令替代：

@import "compass"

然后按照自述文件中的步骤设置扩展，例如susy。

- max

---

你不需要在 application.rb 中 require gems，因为这一行 Bundler.require(*Rails.groups) 已经包含了它们。 - max

此外，在 SASS 中导入文件时不要包括扩展名。应该是 @import "welcome"; 而不是 welcome.scss。 - max

Sass Rails早已停止支持导入.css.scss文件(https://github.com/rails/sass-rails/issues/290)。而且这也是多余和愚蠢的，因为`.scss`扩展名告诉我们它编译成CSS。 - max

好的，@max，我已经尝试了两次。我创建了一个新项目，将compass-rails添加到gemfile中，运行了bundle。添加了gem susy。再次运行bundle。运行bundle exec compass install susy。我尝试添加config.compass.require "susy"，但它说未知变量config，所以我把它拿掉了。添加了一个控制器并运行它，但是scss更改需要20-30秒才能编译。 - Nick

你在另一个窗口运行“指南针观察器”吗？另外很抱歉，但是在Windows上开发Rails通常不太好，因为几乎所有东西都是针对Unix服务器进行优化的。 - max

Answer 2

尝试不要导入整个 Compass 库，而是只导入你需要的模块，例如：

import just the module you want, i.e.:

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

• 选自如何加速Rails Asset Pipeline的预编译过程？

- lulalala

---

这绝对可以大大加快速度。 - Nick