如何将 application.css 中的 CSS 属性应用到 Rails 应用程序中的页面?

问题描述 投票:0回答:1

这是我缺少分号或整个点的问题之一。

我正在 7.1.3.2 中制作 Rails 应用程序。

我无法将 css 属性应用于我的视图。

我用

创建了该应用程序
% rails new --database=postgresql --name=myapp

我的 ./app/assets/stylesheets/application.css 文件是:

(comments snipped)
= require_tree .
= require_self
body {background-color: teal;}

我的./app/views/layouts/application.html.erb是:

  <title>MyApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <h1> The time is </h1>
   <%= Time.now %>
  </body>
</html>

如果我转到 localhost:3000/assets/application.css?body=1,我可以看到

(comments snipped)
= require_tree .
= require_self
body {background-color: teal;}

(这有点奇怪,因为 application.css 位于 /assets/stylesheets 而不是 /assets ;但对文件的编辑会立即显示。)

如果我访问 localhost:3000,并查看源代码,我明白了

<!DOCTYPE html>
<html>
<head>
    <title>MyApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="csrf-param" content="authenticity_token"/>
    <meta name="csrf-token" content="xrgOl47LT8fz9UPdAoP85ierdQVWyqirwYQ0nJZW0RdPqrOOSNRvz8Xy9WXxw-8C-Q27v55aR8TNysfVEoZ6mA"/>

    <link rel="stylesheet" href="/assets/application-1a92102f03589ed75926c49624344892f7d000b3e5a3b6f98056e7c26efc8a33.css" data-turbo-track="reload"/>
    <script type="importmap" data-turbo-track="reload">{
      "imports": {
        "application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",
        "@hotwired/turbo-rails": "/assets/turbo.min-918a6cf2f2be8ed9555c9a11eee69c7dc2f01770802815576efc931876b327fb.js",
        "@hotwired/stimulus": "/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js",
        "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
        "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
        "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
        "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
      }
    }</script>
    <link rel="modulepreload" href="/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js">
    <link rel="modulepreload" href="/assets/turbo.min-918a6cf2f2be8ed9555c9a11eee69c7dc2f01770802815576efc931876b327fb.js">
    <link rel="modulepreload" href="/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js">
    <link rel="modulepreload" href="/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js">
    <link rel="modulepreload" href="/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js">
    <link rel="modulepreload" href="/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js">
    <link rel="modulepreload" href="/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js">
    <script type="module">
    import "application"
    </script>
</head>

<body>
    <h1> The time is </h1>

       2024-05-05 14:56:48 +0100
      
</body>
</html>
  • 这告诉我 css 已包含到页面中,对吗?

我可以在 Web 检查器中的资产下看到 application.css(及其指纹重命名)

  • 但是!我的背景不是青色。

(为了避免疑问,我不会有青色背景 - 只是测试一些可见的 css 属性。:-) )

我是否遗漏了什么?我想我正在使用 Sprocket,并且 gem 位于我的 Gemfile 中。我确实在 stylesheets 文件夹中有一些 css 文件,这些文件似乎被拾取但也没有应用,所以我简化了事情。

html css ruby-on-rails
1个回答
0
投票

这不是有效的 CSS,并且主体样式永远不会被应用:

= require_tree .
= require_self
body {background-color: teal;}

requre_self
require_tree
是链轮指令,你应该将它们放在顶部评论中:

/*
 * = require_tree .
 * = require_self
 */

body {background-color: teal;}

application.css 位于 /assets/stylesheets 而不是 /assets ;但对文件的编辑会立即显示

/assets
是sprockets-rails添加的路线,它与
app/assets
目录无关。您只能直接从
public
目录加载文件,因此如果您预编译了资产,则会从
public/assets/
加载它们。在开发过程中,sprocket 会动态编译资源,因此即使您的
public/assets
为空,它仍然可以工作。

© www.soinside.com 2019 - 2024. All rights reserved.