Question

我的控制器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标签。仍然没有运气

Answer 1

由于很少需要在每个页面上加载应用程序中的每个样式表，因此您会发现只导入每页所需的内容以提高效率，缩短加载时间，并解决了哪些样式占用的问题优先！ Rails执行此操作的方法是删除require tree和/application.js文件中的/application.scss语句。在您的application.js＆amp;中导入的唯一文件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

Answer 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而不是让我进行更改想要。

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

编辑：

2 个答案: