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

TM值

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

我找到了类似的问题和一个答案。
即便如此,这个答案没有被标记为解决方案,我已经相应地更改了这个答案和提供的链接的文件(见下文)。然而,我仍然无法实现客户的 css。

Ruby on Rails 教程自定义 CSS 未显示在应用程序中

//编辑

我发现未显示 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''' -edited

@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";
TM值

您可以在 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;
           }

         }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Ruby on Rails中启用压缩?

Bootstrap是否在Ruby on Rails 4网站中覆盖自定义CSS?

如何在Rails应用程序中创建自定义异常?

Ruby on Rails中的自定义搜索

如何在Rails中的ruby中实现哈希值

如何在Ruby on Rails中添加自定义路线,控制器和动作?

如何在Ruby on Rails 5中以起始值自动递增自定义ID?

Ruby on Rails 4:如何在Rails Web应用程序中包含Javascript文件?

如何在ruby应用程序中自定义cron作业?

如何在Rails应用程序的ruby中添加404错误页面?

如何在React-App应用程序上使用CSS自定义图像?

如何制作可在Rails应用程序中任何地方使用的自定义方法

如何在Ruby on Rails中修补猴子

如何从Ruby on Rails应用程序中倾斜注册引擎?

如何在Ruby on Rails中实现复杂的SQL查询?

如何在Ruby on Rails中实现异步付款调用

如何在不覆盖自定义CSS的情况下将Glyphicons添加到Flask应用程序中?

我应该如何在Rails中实现我的Ruby代码?

如何在Ruby on Rails中实现CardDAV

如何在Ruby on Rails中实现RESTful?

如何在Rails应用程序上调试ruby?

Ruby On Rails:如何在Rails中撤消nested_scaffold

如何在Rails应用程序中用自定义图标替换字体真棒图标

如何在Rails中的ruby中实现递归删除?

如何在 Ruby on rails 中连接 Mercadopago

如何在rails应用程序中的tailwind css中导入font-awesome

如何在 Ruby on Rails 中连接模型

如何在 ruby on rails 上的表单选择中添加类 css?

如何在我的 Ruby on Rails 应用程序中读取 JS 文件?