Question

我没有任何错误，但是当他们应该改变时我无法改变样式。我是Ruby on Rails的新手，所以我想在这里学习。这就是我所拥有的。

mediumr_controller.rb:

class MediumrController < ApplicationController
  def index
  end
end

application.html.rb :

<!DOCTYPE html>
<html>
  <head>
    <title>Mediumrails</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

application.scss:

@import "bootstrap";

mediumr.scss:

testHeading {
    color: red;
}

views/layouts/application.html.erb :

<!DOCTYPE html>
<html>
  <head>
    <title>Mediumrails</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

views/layouts/mediumr/index.html.erb

<%= react_component 'Main' %>

组件main.jsx在我运行ruby服务器时显示，它显示我正在尝试显示的文本（并且具有className =“testHeading”），但文本的颜色不会改变。有谁知道这可能是什么问题？

我正在使用rails版本5.1.3

Answer 1

在mediumr.scss内，确保您的.testHeading选择器.之前有testHeading。

现在你有：

testHeading {
  color: red;
}

将其更改为：

.testHeading {
  color: red;
}

此外，在application.scss内，请确保导入mediumr.scss样式表，如下所示：

// application.scss

@import "mediumr";

我的Scss样式未显示在我的组件

1 个答案: