Ruby on Rails 教程自定义 CSS 未显示在应用程序中 [英] Ruby on Rails Tutorial custom CSS not showing up in app
问题描述
我正在运行 Michael Hartl 的 Ruby on Rails 教程，我的 boostrap sass 正在运行，但是我无法显示任何自定义修改..
I'm running the Ruby on Rails Tutorial from Michael Hartl and my boostrap sass is working however I can not get any custom modifications to show up..
在第 5.5 章中，我们添加了 bootstrap sass gem.这是我的 Gem 文件:
In chapter 5.5 we add the bootstrap sass gem. This is my Gem file:
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.6'
gem 'sass', '~> 3.5', '>= 3.5.5'
gem 'autoprefixer-rails', '~> 7.2', '>= 7.2.5'
gem 'bootstrap-sass', '3.3.7'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
安装包后，我被指示在
app/assets/stylesheets/custom.scss
这里我们必须输入以下内容来导入引导程序:
here we have to put the following to import bootstrap:
@import "bootstrap-sprockets";
@import "bootstrap";
还有一些我们编写的自定义 CSS，所以 custom.scss 文件看起来像:
but also some custom CSS that we write, so the custom.scss file looks like:
@import "bootstrap-sprockets";
@import "bootstrap";
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #777;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}
#logo:hover {
color: #fff;
text-decoration: none;
}
我重新启动服务器并查看我的应用程序，boostrap 加载正常，但找不到自定义 CSS 更改！
I restart the server and look at my app and boostrap has loaded fine but the custom CSS changes are nowhere to be found!
如果我查看源代码，所有 css 文件都已编译
If i look at the souce code all the css files are compiled
<link rel="stylesheet" media="all" href="/assets/custom.self-871a674bf18d1e8205b6a321a40cf6fdedb44cd5879414e213f9011fba10d9b0.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/static_pages.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-af04b226fd7202dfc532ce7aedb95a0128277937e90d3b3a3d35e1cce9e16886.css?body=1" data-turbolinks-track="reload" />
当我打开 custom.cscc 文件时，我看到了从 boostrap-sass gem 导入的完整引导源代码，但我的自定义修改无处可寻.如何确保这些与引导程序一起编译?
when I open the custom.cscc file I see the full bootstrap source code imported from boostrap-sass gem but my custom modifications are nowhere to be found. How can I ensure these get compiled along with bootstrap?
玩弄后我意识到我真的无法进行任何修改..一切似乎都已修复.
Playing around I realized I can't really make any modifications.. everything seems to be fixed.
我试过多次重启服务器、刷新并尝试不同的浏览器(以确保有一个干净的缓存).
I've tried restarting the server several times, refreshing, and trying different browsers (to ensure there is a clean cache).
我的 application.css(教程从未指示更改为 .css.scss)
my application.css (the tutorial never instructs to change to .css.scss)
/*
* 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, or vendor/assets/stylesheets of plugins, if any,
* can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear
* at the bottom of the compiled file so the styles you add here take
* precedence over styles defined in any styles defined in the other CSS/SCSS
* files in this directory. It is generally better to create a new file per
* style scope.
*
*= require_tree .
*= require_self
*/
推荐答案
我会把 application.css 重命名为 application.scss 然后去掉
I would rename the application.css to application.scss and then get rid of the
*= require_tree .
*= require_self
我的 application.scss 看起来像这样.所以每当我创建一个新的样式表时，我只需进入 application.scss 并导入它，以便 rails 看到它.
my application.scss looks like this. so whenever I create a new stylesheet I just go into application.scss and import it so that rails sees it.
/*
* 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,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*/
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
/* add custom stylesheets here*/
@import "custom";
@import "sessions";
@import "users";
这篇关于Ruby on Rails 教程自定义 CSS 未显示在应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
