我无法在 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";
您可以在 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] 删除。
我来说两句