我知道这个问题已经被提出了一千次,我觉得我已经阅读了关于它的大多数其他帖子,但我似乎仍然无法弄清楚这个问题。
我刚开始使用 Ruby on Rails,并尝试在我的元素中使用 Compass/Sass/Suzy。它们都可以(大部分)工作,但在使用 compass 编译器时遇到了一些问题。
首先使用bundle exec compass watch
(带和不带--poll
)什么都不做。 (这是假设我理解此命令的要点,即它会即时重新编译,我不必刷新页面即可查看我的更改,但我可能是错的)
其次,当我在更改 .scss 文件后刷新页面时,编译需要 30-35 秒才能完成并重新加载页面。这是无法忍受的。我读到过最新的“compass ”存在一些问题,但大多数帖子都说这是几年前的事了。最新的 compass rails 是否可以正常工作,或者是否存在导致此问题的常见问题?
因为我只是在学习,所以我只有一个 Controller / View /scss 文件,所以我很肯定我没有任何依赖循环问题。
这是我当前设置元素的方式。 (我认为它设置正确,但也许有人可以指出我做错了什么。)
- 我创建了一个新的 Rails 元素并生成了一个“欢迎” Controller
- 修改了我的application.rb
应用.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
gem 文件
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
应用程序.css.scss
@import "compass";
@import "breakpoint";
@import "welcome.scss";
- 分别向我的 welcome.erb 和 welcome.scss 添加了一些 HTML 和 sass。
作为进一步说明,我遇到了一个问题,即每个编译 compass 都会抛出一个已弃用的警告。我听从了建议 here这似乎阻止了它。怀疑它涉及但为了防止我的无知妨碍我想我会提到它的解决方案。
编辑
我想我应该加入我的 welcome.scss 以防万一我在那里做了一些愚蠢的事情。
欢迎.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 上。
最佳答案
compass watch
命令用于在一个简单的元素或一些没有 Assets 管道的框架上使用 compass。它监视文件系统的变化并将您的 SASS 文件编译为 CSS。它可以与 livereloadx 一起使用但这不是主要目的。
您不想在 Rails 中使用 compass watch
。 Rails 相反有一个内置的 assets pipeline哪个做得更好。
如果您仍想使用 compass 的其他功能,您应该使用 compass-rails
gem 。
1。将 gem 添加到 gemfile
gem 'sass-rails'
gem 'compass-rails'
然后运行 bundle
来安装 gem。
2。设置你的 application.scss
如果您有一个 application.css
文件,请将其重命名为 application.scss
。请注意,不应将其命名为 .css.scss
。删除任何 sprockets 指令,这些指令是如下所示的注释:
#= require 'foo'
改为使用 SASS @import
指令:
@import "compass"
然后 follow the steps in the readme设置 susy 等扩展。
关于css - Rails/Compass/Sass 编译 super 慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41092247/