Question

我无法在Ruby on Rails应用程序中实现客户CSS。我在本地所做的更改未显示在Heroku的页面中。

我发现类似的问题和一个答案。
即便如此，这个答案并未标记为解决方案，但我还是相应地更改了此答案和提供的链接的文件（请参见下文）。但是，我仍然无法实现客户CSS。

Ruby on Rails Tutorial custom CSS not showing up in app

///编辑

我发现未显示css的可能原因是预编译在本地运行（下面的链接）并作为建议的文件.json删除。但是custom.css尚未实现。

https://help.heroku.com/TEN5TWQ1/why-are-my-css-js-changes-not-showing-up-in-my-rails-app

    ‘’’ Gemfile’’’
    gem 'bootstrap-sass',          '3.3.6'
    gem 'sass-rails',              '5.0.6'

‘app /资产/样式表/application.scss’’编辑的

@import main;
@import "bootstrap-sprockets";
@import "bootstrap";
@import "custom";
@import "styles";
@import 'colors';
@import "sessions";
@import "users";

‘’’app / assets / javascripts / application.js’’

     //= require jquery
    //= require jquery_ujs

    //= require bootstrap

//= require_tree .

    bundle install

//edited

'''application.html.erb'''

    !DOCTYPE html>
    <html>
      <head>
        <title><%= full_title(yield(:title)) %></title>
        <%= stylesheet_link_tag "application", media: "all",
                                               "data-turbolinks-track" => true %>
        <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
        <%= csrf_meta_tags %>
        <%= render 'layouts/shim' %>
      </head>
       <body>
        <body>
        <%= render 'layouts/header' %>
        <div class="container">
          <% flash.each do |message_type, message| %>
            <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
          <% end %>
          <%= yield %>
          <%= render 'layouts/footer' %>
          <%= debug(params) if Rails.env.development? %>
        </div>
      </body>
    </html>


    <% flash.each do |message_type, message| %>
            <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
          <% end %>



    //custom.css.scss(first lines)
    //edited


        * mixins, variables, etc. */
    .t-a
     {
    color: red;
    }


//applicatio.css.scss
//edited

    *
     * 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,

     *= require_tree .
     *= require_self
     *= require custom.css.scss
     */

    @import "bootstrap-sprockets";
    @import "bootstrap";
    @import "custom";
    @import "styles";

Answer 1

我不是Ruby专家。我将根据我的经验提供建议，这可能与实际的良好做法有所不同。

第一件事：如果您正在编写Sass，我已经意识到在文件名中显示所有预处理程序是一种很好的做法。它的工作方式是首先解释文件名中最远的预处理器。例如：文件whatever.js.coffee.erb将首先由Ruby解释器解释，然后由coffee脚本解释器解释，然后最终文件将是一些javascript。

在本地编译我的资产时，我注意到我必须明确使用名称。因此，将application.scss重命名为application.css.scss基本上是无害的，也是一种好习惯。

（尽管这可能不是问题的根源）

第二件事：您提供的信息并不能真正解释为什么custom.css样式未在您的视图中显示。

为什么？

因为您的代码对我来说看起来不错。

它在做什么？

好吧，Rails应用程序的样式表位于应用程序/资产/样式表中。尽管这些样式表不会自动显示在您的网页上。

为了将这些样式表添加到您的页面，有一个名为stylesheet_link_tag的助手。 stylesheet_link_tag只会在HTML页面中添加指向样式表文件的链接。必须将其放在<head></head> html标记之间。

在Rails中，尽管您没有为每个页面重新创建<head></head>标签。所有视图均来自名为application.html.erb的全局布局模板（您知道这是您复制的内容），在这里您可以全局处理样式表附件。

在您的教程中，指导者在application.html.erb文件中添加了一个样式表：application（Rails会将其理解为application.css或application.css.scss ...并尝试在app / assets / stylesheets文件夹中找到它）。您网站的所有网页都将具有此样式表。

但是然后您告诉我：“整个应用程序如何拥有一个文件。我有很多控制器和视图？”

这是很有趣的地方：这个样式表有一些技巧。主要是@import和*= require。两者都允许将其他样式表导入当前样式表。（需要是Ruby，导入是Sass）

/*
 *= require custom.css.scss 
*/
@import "custom";

上面的代码将执行相同的操作：将文件custom.css.scss聚合到application.css。如果您添加更多文件，它们也将被汇总。

一些细节：

*= require_tree.将导入app / assets / stylesheets文件夹中的每个样式表。如果要制作一个很大的css文件，该文件可以在站点的每个页面上使用，则非常方便。

*= require_self将处理注释部分之后的内容。基本上说：“无视样式，只做需要的事情”

现在确定您可以做什么：

将application.scss重命名为application.css.scss
恢复require_self：我不确定它实际上对@imports是否有任何影响，但是拥有它没有害处。

如果那不能解决您的问题：在require中添加自定义文件：

 /*
   *= require custom.css.scss 
 */

它应该不会失败（不过不要忘了按照上面的方法重命名自定义）

最后考虑：恢复require tree.，它应该收集所有样式表文件并将它们聚合到application.css（在这里我写application.css是因为我在最终网页中谈论样式表而不是文件在您的Rails应用中）（也在开发中，您的application.css文件可能看起来aggregated却在生产中）

Answer 2

您需要拥有app/assets/stylesheets/application.scss并重命名.css中的所有.scss。

然后在您的app/assets/stylesheets/application.scss中删除所有*= require并使用：

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

在您的app/assets/stylesheets/custom.scss中，仅使用常规的CSS类和SCSS，而无需使用任何@import。

请注意，不要因为覆盖而在两个文件中使用相同的类。

如果您决定使用新文件app/assets/stylesheets/styles.scss。

您需要添加到application.scss

@import "styles";

那应该很好用。

Answer 3

始终遵循一种方法。要么

1）如果使用的是.scss文件，则仅使用@import。

  @import "custom"

删除所有其他语法，例如 * =需要“自定义”

或者2）如果您使用的是.css文件，则只能使用以下语法

  *= require "custom"

并删除所有@import语法

永远不要像在代码中那样混淆它们。

做一件事，遵循第二种方法。并要求您在* = require_tree上方的自定义css文件。例如。

 *=require "custom"
 *=require_tree .

然后让我知道。完成此操作后，不要忘记重新启动服务器，因为这些文件在服务器启动时会加载一次。

Answer 4

您可以在Ruby on Rails应用程序中实现客户CSS。例如，您可以更改文本或链接的颜色，或更改字体大小，而与第一种或第二种方法无关（请参见下文）

第一种方法：

在application.scss中使用导入语句：

    @import "bootstrap-sprockets";
    @import "bootstrap";
    @import "custom";
    @import "styles";

第二种方法：

   a) using import statements in custom.scss :
      @import "bootstrap-sprockets";
      @import "bootstrap";

   b) using statements as below in the application.scss:
         *= require_tree .
         *= require_self

You should not mix up the first and the second approach.

    You could not change hover as you would  like because
    it need to be to complied with bootstrap settings.
    For example, changing hover to green or red produces error.
    So, I ended up using the grey-darker color(see below) instead.
    You could override bootstrap but it is considered as the
    bad idea. 


    examples of changing  formatting:

        h1.green-text { color: green; font-size: 10em; }

        <h1 class="green-text">This text is very large and green
        </h1>


        a {
         color: green;
         &:hover {
             color: $gray-darker;
           }

         }

Answer 5

我在一个答案中看到，将@import "custom"放在@import "boostrap"上方可以解决此问题。也许您应该尝试一下。

如何在Ruby on Rails应用程序中实现自定义CSS？

5 个答案: