为什么我的 RoR 应用程序中的 CSS 会根据我是在生产中还是在开发中运行而发生变化？

问题描述

我在生产中运行时遇到了一些开发中没有的问题，例如我有一个下拉菜单，在开发中运行时看起来像我想要的：只有菜单按钮可见，并且它下面的选项在悬停或聚焦之前是隐藏的。也没有要点。但是，当我在生产环境中运行时，我会在每个 <li> 上获得项目符号，而我以前隐藏的选项现在显示在菜单 <button> 下方一团糟。

HTML：

<nav class="dropdown-nav" role="navigation">
  <ul class="main-menu">
    <li>
      <button class="btn btn--action" aria-haspopup="true"><%= t('menu') %></button>
      <ul class="dropdown" aria-label="submenu">
        <% if logged_in? %>
          ....
        <% else %>
          <li class="nav-item">
            <%= link_to(t('signup'),signup_path) %>
          </li>
          <li class="nav-item">
            <%= link_to(t('login'),login_path) %>
          </li>
        <% end %>
      </ul>
    </li>
  </ul>
</nav>

scss：

.main-menu {
  padding: 0;
  list-style-type: none;
  
  & li {
    display: block;
    transition-duration: 0.5s;

    &:hover,&:focus-within {
      cursor: pointer;
    }

    &:hover > ul,&:focus-within > ul,& ul:hover,& ul:focus {
      visibility: visible;
      opacity: 1;
      display: block;
    }
  }
}

.dropdown {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  display: none;

  padding: 0.2rem;
  background-color: $off-white;
  min-width: 10rem;
  Box-shadow: 0px 10px 10px -5px;
  z-index: 1;
  overflow: auto;
  margin-top: 0;
  list-style-type: none;
}

.nav-item {
  clear: both;
  padding: 0.5rem 1rem;

  &:hover,&:focus-within {
    cursor: pointer;
  }
}

编辑以添加我的 config/environments/production.rb 文件：

Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.

  # Code is not reloaded between requests.
  config.cache_classes = false

  # Eager load code on boot. This eager loads most of Rails and
  # your application in memory,allowing both threaded web servers
  # and those relying on copy on write to perform better.
  # Rake tasks automatically ignore this option for performance.
  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  # Attempt to read encrypted secrets from `config/secrets.yml.enc`.
  # Requires an encryption key in `ENV["RAILS_MASTER_KEY"]` or
  # `config/secrets.yml.key`.
  config.read_encrypted_secrets = true

  # disable serving static files from the `/public` folder by default since
  # Apache or Nginx already handles this.
  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb

  # Enable serving of images,stylesheets,and JavaScripts from an asset server.
  # config.action_controller.asset_host = 'http://assets.example.com'

  # Specifies the header that your server uses for sending files.
  # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
  # config.action_dispatch.x_sendfile_header = 'x-accel-redirect' # for Nginx

  # Mount Action Cable outside main process or domain
  # config.action_cable.mount_path = nil
  # config.action_cable.url = 'wss://example.com/cable'
  # config.action_cable.allowed_request_origins = [ 'http://example.com',/http:\/\/example.*/ ]

  # Force all access to the app over SSL,use Strict-Transport-Security,and use secure cookies.
  # config.force_ssl = true

  # Use the lowest log level to ensure availability of diagnostic information
  # when problems arise.
  config.log_level = :debug

  # Prepend all log lines with the following tags.
  config.log_tags = [ :request_id ]

  # Use a different cache store in production.
  # config.cache_store = :mem_cache_store

  # Use a real queuing backend for Active Job (and separate queues per environment)
  # config.active_job.queue_adapter     = :resque
  # config.active_job.queue_name_prefix = "Appear_#{Rails.env}"
  config.action_mailer.perform_caching = false

  # Ignore bad email addresses and do not raise email delivery errors.
  # Set this to true and configure the email server for immediate delivery to raise delivery errors.
  # config.action_mailer.raise_delivery_errors = false

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation cannot be found).
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify

  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new

  # Use a different logger for distributed setups.
  # require 'syslog/logger'
  # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')

  if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger    = ActiveSupport::TaggedLogging.new(logger)
  end

  # Do not dump schema after migrations.
  config.active_record.dump_schema_after_migration = false
end

解决方法

你用错了 sass ampersand。

.main-menu {
  &:li {
    display: block;
    transition-duration: 0.5s;
    ...
  }
}

编译为：

li.main-menu 
  display: block;
  transition-duration: 0.5s;
  ...
}

虽然你想要：

.main-menu li
  display: block;
  transition-duration: 0.5s;
  ...
}

如果你去掉 & 符号，你会得到什么：

.main-menu {
  padding: 0;
  list-style-type: none;
  li {
    display: block;
    transition-duration: 0.5s;

    &:hover,&:focus-within {
      cursor: pointer;
    }

    &:hover > ul,&:focus-within > ul,ul:hover,ul:focus {
      visibility: visible;
      opacity: 1;
      display: block;
    }
  }
}

当您要向当前选择器添加规则时，请使用与号。使用常规嵌套为子元素定义规则。