Я понимаю, что эта проблема поднималась тысячу раз, и мне кажется, что я прочитал большинство других сообщений по ней, но я все еще не могу понять эту.
Я только начинаю работать с Ruby on Rails и пытаюсь использовать Compass / Sass / Suzy в своем проекте. Все они работают (в основном), но у меня проблемы с компилятором компаса.
Во-первых, использование bundle exec compass watch
(с --poll
и без него) ничего не делает. (предполагается, что я понимаю суть этой команды, которая заключается в том, что она повторно компилируется на лету, и мне не нужно обновлять страницу, чтобы увидеть мои изменения, но я могу ошибаться)
Во-вторых, когда я обновляю страницу после изменения моего файла .scss, для завершения компиляции и перезагрузки страницы требуется 30-35 секунд. Это невыносимо. Я читал, что есть некоторые проблемы с последними «рельсами компаса», но большинству сообщений, в которых говорилось, что это было несколько лет назад. Последние версии compass-rails работают безупречно или есть общая проблема, которая вызывает это?
Поскольку я только учусь, у меня есть только один файл controller / view / scss, поэтому я уверен, что у меня нет проблем с циклами зависимостей.
Вот как у меня сейчас настроен проект. (Я думаю, что он настроен правильно, но, возможно, кто-то укажет на то, что я сделал неправильно.)
- Я создал новый проект рельсов и сгенерировал «приветственный» контроллер
- Модифицировал мой 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
- Изменил мой 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]
- Запустите команду
bundle
- Application.css переименован в application.css.scss.
application.css.scss
@import "compass";
@import "breakpoint";
@import "welcome.scss";
- Добавил немного HTML и sass в мои welcome.erb и welcome.scss соответственно.
В качестве дополнительной заметки у меня была проблема, когда на каждом компиляторе компас выдавал устаревшее предупреждение. Я последовал совету здесь, который, казалось, остановил его. Сомневаюсь, что это связано, но чтобы мое невежество не мешало решению, я решил упомянуть об этом.
ИЗМЕНИТЬ
Я решил, что добавлю свой 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.