Question

我正在运行Michael Hartl的Ruby on Rails教程，我的boostrap sass正在运行，但是我无法进行任何自定义修改以显示..

在第5.5章中，我们添加了bootstrap sass gem。这是我的Gem文件：

# 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'

捆绑安装后，我被指示在

下创建自定义css文件

app/assets/stylesheets/custom.scss

这里我们必须将以下内容导入bootstrap：

@import "bootstrap-sprockets";
@import "bootstrap";

还有我们编写的一些自定义CSS，因此custom.scss文件如下所示：

@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更改无处可寻！

如果我查看源代码，则编译所有css文件

<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导入的完整bootstrap源代码，但我的自定义修改无处可寻。我怎样才能确保这些与bootstrap一起编译？

玩弄我意识到我无法进行任何修改......一切似乎都已修复。

我尝试过多次重启服务器，刷新并尝试使用不同的浏览器（以确保有一个干净的缓存）。

编辑：

我的application.css（教程永远不会指示更改为.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
 */

Answer 1

我会将application.css重命名为application.scss，然后删除

 *= require_tree .
 *= require_self

我的application.scss看起来像这样。因此，每当我创建一个新的样式表时，我只需进入application.scss并导入它，以便rails看到它。

/*
 * 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没有显示在应用程序中

1 个答案: