自定义 CSS 无法与 Rails 7 的 CSS 捆绑一起使用

Question

在使用 Rails 7 时，我不明白为什么我的自定义 CSS 不起作用。

我使用 Bootstrap 标志构建了新的 Rails 应用程序，该应用程序运行良好（CSS 和 JS，使用 Bootstrap 模式进行了测试）。这些是我的默认配置文件：

应用程序.js

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"

应用程序.bootstrap.scss

@import 'bootstrap/scss/bootstrap';

包.json

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.0",
    "@popperjs/core": "^2.11.2",
    "bootstrap": "^5.1.3",
    "esbuild": "^0.14.23",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "sass": "^1.49.9",
    "stimulus": "^3.0.1"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

我可以内置CSS/builds/application.css

---

现在我想添加自定义 CSS。这是我的过程：

1. 添加了新文件stylesheets/custom.css，带有 css：

    .my-class {
      color: #fff;
      background-color: #00eb00;
    }

2. 添加导入到 application.bootstrap.scss

   @import "custom";

3. yarn run build:css

4. 现在我可以.my-class看到builds/application.css

但是当我尝试在 HTML 中使用 id 时，没有添加 CSS。为什么？我应该把它放在其他地方吗？

编辑： 我让它运行，但只有当我手动运行rails asset:precompile然后bin/dev时。为什么每次更改内容时都需要预编译？

Answer 1

在一个新的 Rails 7 应用程序（带有css=bootstrap）中，我做了以下操作来获取自定义 css 样式：

1. 取消gem 'sass-railsGemfile 中的注释，然后捆绑安装（更多信息请参见此处）
2. 在 app/assets/stylesheets 中创建一个新的 css 文件并将其命名为 example.css.scss
3. 将此行添加到 app/assets/config/manifest.js 中：

//= link example.css

4. 无论您在哪里需要访问这些样式，都请包含此标签

<%= stylesheet_link_tag "example", "data-turbo-track": "reload" %>

5. 启动你的服务器bin/dev而不是rails server

6. 一切都应该可以工作（一个很好的测试是将其包含在您的 example.css.scss 文件中，并且 H1s 应该变成绿色）

<%= stylesheet_link_tag "example", "data-turbo-track": "reload" %>

资源

• 这里的视频非常有用

一个单独的问题

我也遇到了这个错误（当我用谷歌搜索时，我在这里找到了自己的答案！）：

The asset 'application.css' was not found in the load path.

指向这一行：

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

在这种情况下，跑步yarn run build:css就是解决方案。当我尝试时，我看到：

yarn run build:css
rbenv: sass: command not found

The `sass' command exists in these Ruby versions:
  2.7.7
  3.0.3
  3.2.2

所以我跑了，然后再次npm install sass尝试，它成功了。yarn run build:css

Answer 2

我刚刚遇到这个问题，注意到 JavaScript 和 CSS 在更改后都没有重新编译。如果您已将gem jsbundling-rails其包含在 gemfile 中，请查看https://github.com/rails/jsbundling-rails了解更多详细信息和操作方法。运行yarn run build:css以重新编译 CSS 资源。

我更喜欢用它./bin/dev来启动本地服务器并监视 JavaScript 和 CSS 更新。

Answer 3

如果我添加它对我有用

//= link custom.css

到应用程序/资产/配置/manifest.js

而且我没有添加@import“custom”；到 application.bootstrap.scss