Как реализовать пользовательские CSS в приложении Ruby on Rails? - PullRequest
Новая
       3

Как реализовать пользовательские CSS в приложении Ruby on Rails?

0 голосов
/ 04 апреля 2019

Я не смог реализовать клиентский css в приложении Ruby on Rails. Изменения, которые я сделал локально, не отображаются на страницах 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";

«»»приложение / активы / 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";

Ответы [ 4 ]

0 голосов
/ 19 апреля 2019

Вы можете реализовать клиентские CSS в приложении Ruby on Rails. Например, вы можете изменить цвет текста или ссылок или размер шрифта независимо от первого или второго подхода (см. Ниже)

первый подход:

с использованием операторов импорта в 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;
           }

         }
0 голосов
/ 13 апреля 2019

Вам нужно иметь 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 голосов
/ 14 апреля 2019

Всегда придерживайтесь одного подхода. Или

1) если вы используете файл .scss, используйте только @import. 

  @import "custom"

Удалить все остальные синтаксисы, такие как * = требуется "пользовательский"

Или 2) Если вы используете файл .css, используйте только следующий синтаксис 

  *= require "custom"

И удалить весь синтаксис @import

Никогда не смешивайте их, как вы делали это в своем коде.

Сделай одно, следуй второму подходу. И потребуйте свой собственный файл CSS чуть выше * = require_tree. Например, 

 *=require "custom"
 *=require_tree .

Тогда дайте мне знать. После этого не забудьте перезагрузить сервер, так как эти файлы загружаются один раз при запуске сервера.

0 голосов
/ 07 апреля 2019

Я не эксперт по Ruby.Я дам совет, основываясь на моем опыте, который может отличаться от реальной хорошей практики.

1-я вещь: Если вы пишете Sass, я понял, что хорошей практикой является показывать все препроцессоры вимя файлаЭто работает так, что самый дальний препроцессор из имени файла будет интерпретироваться первым.Например: файл whatever.js.coffee.erb будет сначала интерпретироваться интерпретатором Ruby, затем интерпретатором сценариев кофе, а затем в конечном файле будет использоваться некоторый javascript.

При локальной компиляции ресурсов я заметил, что мне нужно было явно указывать имена.Таким образом, переименование application.scss в application.css.scss является безвредной и хорошей практикой.

(хотя это может и не быть источником вашей проблемы)

2-я вещь :предоставленные вами биты не объясняют, почему стили custom.css не отображаются в вашем представлении

Почему?

Поскольку ваш код "выглядит" хорошо для меня.

Что он делает?

Что ж, в вашем приложении Rails есть таблицы стилей, расположенные в app / assets / stylesheets.Хотя эти таблицы стилей не будут автоматически отображаться на ваших веб-страницах.

Чтобы добавить эти таблицы стилей на свои страницы, существует помощник по имени stylesheet_link_tag.stylesheet_link_tag просто добавит ссылку на файл таблицы стилей на вашей HTML-странице.Это должно быть помещено между <head></head> HTML-тегами.

В Rails, хотя вы не воссоздаете теги <head></head> для каждой страницы.Все представления inerhit из глобального шаблона макета под названием 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 custom.css.scss 
 */

Не должно произойти сбой (не забудьте переименовать пользовательский, как указано выше)

Последнее решение: восстановить require tree. Он должен собрать все файлы таблиц стилей и объединитьих в application.css (здесь я пишу application.css, потому что я говорю о таблице стилей на последней веб-странице, а не о файле в вашем приложении Rails) (также в процессе разработки ваш application.css файл может не выглядеть aggregated, но он будет впроизводство)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...