如何让控制器 sass 文件优先于从 application.scss 导入的 sass答案

【问题标题】：How to give controller sass files precedence over sass imported from application.scss如何让控制器 sass 文件优先于从 application.scss 导入的 sass
【发布时间】：2017-06-12 04:17:17
【问题描述】：

我在我的控制器 scss 文件中遇到了一个问题，我必须不断地用 !important 标记所有内容才能设置元素的样式。这是我的 Map 控制器 scss 中的示例输入元素：

.search-field {
    width: 300px !important;
    box-shadow: none !important;
    border-bottom: none !important;
    display: inline-block;
    font-size: 16px;
    margin-left: 15px !important;
}

这是因为在application.scss内部，我导入了我的材质库，它优先于map.scss：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 @import "materialize";
 @import "font-awesome";
 * {
     font-family: 'Raleway', sans-serif;
 }

 html {
     width: 100%;
     height: 100%;
 }
 body {
     margin: 0;
     min-width: 100%;
     min-height: 100%;
     background-color: #1A1A1A;
 }

如何避免在任何地方都使用!important 标志？

编辑：

我也尝试了以下（没有运气）

在application.html.erb 内，我添加了一个指向我的控制器 css 的附加链接

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag    'map', media: 'all', 'data-turbolinks-track': 'reload' %>

然后在 application.scss 中删除了 require_tree . 的使用

但是，当我重新启动服务器时，我仍然需要 !important 标记。还是没有运气

【问题讨论】：

在你的其他人下面添加@import "map";怎么样（+重新启动）？
Rails 资源按顺序加载，因此您可以通过更改布局中样式标签的顺序来设置优先级。
您能使用更具体的选择器吗？
@bkunzi01 不知道这对我有什么帮助，因为我使用了一个语句：<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
您可以在布局文件的头部单独调用这些文件，而不是将它们包含在您的application.scss 中。在您的 application.scss 脚本标记之前调用它们，以确保它优先于这些导入

标签： ruby-on-rails sass

【解决方案1】：

由于很少需要将应用程序中的每个样式表都加载到每个页面上，因此您会发现只导入每个页面所需的内容以提高效率、缩短加载时间并解决样式占用的问题优先！ Rails 执行此操作的方法是删除 /application.js 和 /application.scss 文件中的 require tree 语句。在您的 application.js 和 application.scss 文件中导入的唯一文件应该是应用程序范围的样式或 js。然后，您将以下行添加到您的 layouts/application.html.erb 文件中：

<head> 标签内：

<%= stylesheet_link_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.css"]

这将包括相应控制器的样式表。将它放在应用程序的 stylesheet_link_tag 之前或之后会根据您的需要更改优先级。

然后在您的<body> 标签中添加：

 <%= javascript_include_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.js"]

现在，为了在生产环境中部署您的应用程序，您需要将控制器名称添加到您的 config/initializers/assets.rb 文件中，否则您将收到资源未编译的错误消息。在该文件中，您将为地图控制器添加如下内容：

Rails.application.config.assets.precompile += %w( maps.js )

Rails.application.config.assets.precompile += %w( maps.css) #Note rails expects the css suffix and not the scss suffix here so use that and not scss even though your file may be maps.scss

然后，以后每次添加新控制器时，将该控制器的名称添加到上面显示的数组中，然后运行 bundle exec rake assets:precompile RAILS_ENV=production 就可以了。有关更多示例，请在此处查看我对基本相同问题的旧答案：sprockets loads sass in random order with twitter bootstrap

【讨论】：

这应该有更多的赞成票。类似问题有很多不完整的答案，有几十个或几百个赞。

【解决方案2】：

我的问题是添加到资产管道加载顺序中的较低优先级 css 规则的组合。当我对我的application.scss 文件执行以下操作时，我发现我的问题是求解器：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require font-awesome
 *= require materialize
 *= require_tree .
 */

 * {
     font-family: 'Raleway', sans-serif;
 }

 html {
     width: 100%;
     height: 100%;
 }
 body {
     margin: 0;
     min-width: 100%;
     min-height: 100%;
     background-color: #1A1A1A;
 }

之后我可以删除大多数 !important 规则，发现我正在使用类 css 规则，但它被特定的 input[type=text] 规则覆盖，使用 ID 代替让我进行我想要的更改。

【讨论】：