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

问题描述 投票：0回答：4

我无法在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 / assets / stylesheets / application.scss''' - 编辑

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

“””应用程序/资产/ Java脚本/ 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";
ruby-on-rails
4个回答
0
投票

我不是Ruby专家。我会根据我的经验给出建议，这可能与实际的良好做法不同。

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

在本地编译我的资产时，我注意到我必须明确地使用名字。所以基本上将application.scss重命名为application.css.scss是无害和良好的做法。

（虽然它可能不是你问题的根源）

第二件事：你提供的部分并没有真正解释为什么你的视图中没有显示custom.css样式。

为什么？

因为你的代码“看起来”对我很好。

它在做什么？

你的Rails应用程序的样式表位于app / assets / stylesheets中。虽然这些样式表不会自动显示在您的网页上。

为了将这些样式表添加到您的页面，有一个名为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。两者都允许将其他样式表导入当前样式表。 （require是Ruby，import是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但它将在生产中）

0
投票

始终遵循一种方法。或

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

  @import "custom"

删除所有其他语法，如* = require“custom”

或2）如果您使用.css文件，则仅使用以下语法

  *= require "custom"

并删除所有@import语法

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

做一件事，按照第二种方法。并要求您的自定义css文件位于* = require_tree之上。对于前者

 *=require "custom"
 *=require_tree .

然后告诉我。执行此操作后，请不要忘记重新启动服务器，因为这些文件在服务器启动时加载一次。

0
投票

你需要有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";

这应该是完美的。

0
投票

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

第一种方法：

在application.scss中使用import语句：

    @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;
           }

         }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.