css - 使用 Capybara 测试 Rails 应用程序时出现 CSS 错误

Question

在我的 Rails 应用程序中使用 Rspec 和 Capybara 进行测试时，我遇到了无法更正的错误。

失败/错误:访问('/') Action View ::模板::错误: “text-indent:”后的无效 CSS:预期的表达式(例如 1px、粗体)为“}”

它说错误发生在 app/assets/stylesheets/application.css 中。到目前为止我什么都没有，无法找到问题所在。我认为错误(基于我读过的内容)可能与我的 css 或 scss 文件扩展名有关。我对他们进行了一些修改，没有任何改变，所以我在这里寻求帮助。

我的注册_spec.rb

require 'spec_helper'

describe  "Signing Up" do
  it "allows a user to sign up for the site and creates the object in the database" do
    expect(User.count).to eq(0)

    visit('/')
    expect(page).to have_content("Sign Up")
    click_link "Sign Up"

    fill_in "First Name",            with: "John"
    fill_in "Last Name",             with: "Smith"
    fill_in "Password",              with: "password123"
    fill_in "Password Confirmation", with: "password123"
    click_button "Sign Up"


    expect(User.count).to eq(1)

  end
end

这是我的 style.css

#about {
  background: #efeddf;
  padding: 20px;
  border: 2px solid #57645d;
}

#about-content {
  text-align: left;
}

#article-image {
  float: left;
 }


#article-links {
  list-style-type: none;
}

#article-links a {
  font-weight: bold;
  color: #3f4944;
  text-decoration: none;
}

#article-links img {
  margin-right: 20px;
}

#article-show {
  background: #efeddf;
  padding: 20px;
  border: 2px solid #57645d;
}



.bit-5 {
  background: white;
  padding: 20px;
  text-align: center;
  border: 2px solid #57645d;
  color: #606e67;
  float: right;
  display: block;
}

.bit-75 {
  background: white;
  padding: 20px;
  text-align: left;
  border: 5px solid #57645d;
  color: #606e67;
  text-indent: 
}


.clearfooter {
  height: 330px;
  clear: both;
}

#contact {
  background: #efeddf;
  padding: 20px;
  border: 2px solid #57645d;
}

#contact-content {
  text-align: left;
}


footer {
  position: relative;
  width: 100%;
  height: 330px;
  background: #3f4944;
}



html,body {
  background: #efeddf;
  height: 100%;
}


#title a {
  color: #555;
  text-decoration: none !important;
}

#main-header {
  height: 180px;
  background: #57645d;  
  position: fixed;
  top: 0px;
  margin: auto;
  z-index: 100000;
  width: 100%;

}


#main-nav ul {
  text-align: center;
  margin-top: 120px;
}

#main-nav ul li {
  padding-left: 10px;
  display: inline-block;
  margin-right: 20px;
}

#main-nav ul li a {
  text-decoration: none;
  color: #efeddf;
  font-size: x-large;
}



#new-article-path a {
  font-weight: bold;
  color: #3f4944;
}

#recent-article li {
  list-style: none;
}

#recent-article li a {
  color: #57645d;
  text-decoration: none;
}

我的网格(lemonade.css)

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box
}

/* Set the width of the grid */
.frame {
  margin: auto;
  width: 1100px;
  margin-top: 200px;
  min-height: 100%;
  margin-bottom: -330px;
  position: relative;
}

/* Attribute selector */
[class*='bit-'] {
  float: left;
  padding: 0.3em;
}

/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
  float: right
}

/* Clearfix */
.frame:after {
  content: "";
  display: table;
  clear: both
}

/* Main Widths */
.bit-1  { width: 100% }
.bit-2  { width: 50% }
.bit-3  { width: 33.33% }
.bit-4  { width: 25% }
.bit-5  { width: 20% }
.bit-6  { width: 16.6666666667% }
.bit-7  { width: 14.2857142857% }
.bit-8  { width: 12.5% }
.bit-9  { width: 11.1111111111% }
.bit-10 { width: 10% }
.bit-11 { width: 9.09090909091% }
.bit-12 { width: 8.33% }
.bit-75 { width:75%}
.bit-25 { width:25%}

/* Landscape mobile & down */
@media (max-width: 30em) {
  .bit-1,
  .bit-2,
  .bit-3,
  .bit-4,
  .bit-5,
  .bit-6,
  .bit-7,
  .bit-8,
  .bit-9,
  .bit-10,
  .bit-11,
  .bit-12 {
    width: 100%;
  }
}

/* Portrait tablet to landscape */
@media (min-width: 30em) and (max-width: 50em) {
  .bit-4,
  .bit-6,
  .bit-8,
  .bit-10,
  .bit-12 {
    width: 50%
  }

  .bit-1,
  .bit-2,
  .bit-3,
  .bit-5,
  .bit-7,
  .bit-9,
  .bit-11 {
    width: 100%
  }
}

/* Landscape to small desktop */
@media (min-width: 50em) and (max-width: 68.750em) {
  .bit-2,
  .bit-7 {
    width: 100%
  }

  .bit-4,
  .bit-8,
  .bit-10,
  .bit-12 {
    width: 50%
  }
}

我对这一切还很陌生，所以任何帮助/和/或批评将不胜感激。谢谢。

Answer 1

您的 style.css 无效导致以下错误:

Failure/Error: visit('/') ActionView::Template::Error: Invalid CSS after " text-indent:": expected expression (e.g. 1px, bold), was "}"

在您的 style.css 中，对于类 .bit-75，您忘记设置 text-indent 属性的值

.bit-75 {
  background: white;
  padding: 20px;
  text-align: left;
  border: 5px solid #57645d;
  color: #606e67;
  text-indent:     // <-- set a value here for eg : 10px;
}