Html Rails 4-使用引导Sass设置CSS样式

我在配置我的应用程序以使用css时遇到问题

我使用引导CSS，通过引导sass gem。我安装了以下gems：

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5.1'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'
gem 'autoprefixer-rails'

我的样式表文件夹配置如下：

<%= link_to article.title, article, class: "extracttitle" %>

application.css.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, vendor/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 styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *


 *= require_tree .
 *= require_self
 */

appliccustom.css.scss

 @import "bootstrap-sprockets";
    @import "bootstrap";

applicframework_和_overrides.css.scss

@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";

.extracttitle {
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  padding-bottom: 5px;
  color: #003366;
  margin-top: 5px;
  line-height: 1.5;
  letter-spacing: 1px;
  text-align:left; 
  padding-left:1px;
  a:link {text-decoration:none; background-color:transparent; color: #003366;};
  a:visited {text-decoration:none;background-color:transparent; color:#003366;};
  a:hover {text-decoration:none;background-color:transparent; color:#E50851;};
  a:active {text-decoration:none;background-color:transparent; color:#003366;};
}

各种其他特定于资源的css文件（例如：profile.css.scss）

我对上述文件的命名方式是，我必须尝试将导入引导的所有文件都放到字母树的顶部，但在application.css.scss）之后，我不确定这是否有帮助

在大多数情况下，我的造型很有效。然而，我在链接标签上的样式设置上遇到了麻烦，我不确定这是因为在内容上放置css的方式（我尝试了20多种变体）还是css文件的配置方式

我已经阅读了大量的gem文档，这些文档说您不应该同时拥有引导和引导套接字（但是我在这个平台上收到的大多数建议正好相反），并且当您使用引导sass时，您不应该在css文件中使用“require”这个词（但我不知道如何替换这个词）（导入树有效吗？我知道无效，但什么有效？？）

我认为有以下链接：

<div class="col-md-3">
                                    <%= link_to icon('facebook', id: 'facebookauth'), user_omniauth_authorize_path(:facebook) %>
                                </div>  
                                <div class="col-md-3">
                                    <%= link_to  icon('google',  id: 'googleauth'), user_omniauth_authorize_path(:google_oauth2) %>
                                </div>  
                                <div class="col-md-3">
                                    <%= link_to icon('linkedin', id: 'linkedinauth'), user_omniauth_authorize_path(:linkedin) %>
                                </div>  
                                <div class="col-md-3">
                                    <%= link_to icon('twitter', id: 'twitterauth'), user_omniauth_authorize_path(:twitter) %>
                                </div>  

当我呈现页面时，它看起来像丑陋的灰色样式，悬停-格罗斯上的黑色背景。当我尝试检查元素时，我希望看到对css样式的引用是最接近内容的

我明白了：

<i id="linkedinauth" class="fa fa-linkedin"></i>

再一次，我尝试了20种不同的方式来设置div标签的样式，以将这个css放在文章标题上，但是同样丑陋的样式被强制应用到元素上

有人能看出我哪里弄错了吗

根据下面的建议，我更改了application.css.scss，因此它现在已经：

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";

我在其他样式表中定义的所有样式都没有得到认可。我在@import tree上尝试了很多变体。这些都不管用

我发现这篇博文建议应该重新组织整个文件结构。

又一次尝试

当我尝试将application.css.scss更改为：

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";
@import "addresses.scss";
@import "articles.css.scss";
@import "common.css.scss";
@import "footer.css.scss";
@import "forms.css.scss";
@import "glyphs.css.scss";
@import "index.css.scss";
@import "legal.css.scss";
@import "navigation.css.scss";
@import "pages.css.scss";
@import "profiles.scss";
@import "video.css.scss";

---

这些样式似乎都能正常工作（除了仍然存在我上面描述的相同问题的链接）。因此，我仍然无法确定如何在内容链接上设置样式。

您应该

将所有SCSS文件导入application.css.SCSS，并删除注释/require语句。请参阅。这些文档让我完全困惑。如果不是“必需”的话，该树是如何包含的？还有，我为什么以不同的格式导入文件样式表文件是指当它们位于application.css.scss中的单个列表中时，它们都不起作用。这部分文档对我来说没有任何意义：然后，从sass文件中删除所有*=require\u self和*=require\u tree.语句。相反，使用@import导入sass文件。不要在sass或其他样式表中使用*=require将无法访问引导程序混合项或变量。这是否意味着我需要为样式表文件夹中的每个文件编写“import@pages.css.scss”和类似内容？
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";
@import "addresses.scss";
@import "articles.css.scss";
@import "common.css.scss";
@import "footer.css.scss";
@import "forms.css.scss";
@import "glyphs.css.scss";
@import "index.css.scss";
@import "legal.css.scss";
@import "navigation.css.scss";
@import "pages.css.scss";
@import "profiles.scss";
@import "video.css.scss";