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

Question

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

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

application.js

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

application.bootstrap.scss

@import 'bootstrap/scss/bootstrap';

package.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"
  }
}

我可以在 /builds 中构建 CSS /application.css

---

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

1. 添加了新文件 stylesheets/custom.css，其中包含 css：

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

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

   @import“自定义”；

3. yarn run build:css

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

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

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

Answer 1

在新的 Rails 7 应用程序（使用 css=bootstrap）中，我执行以下操作来获取自定义 css 样式：

1. 在 Gemfile 中取消注释 gem 'sass-rails，然后捆绑安装 (有关该的更多信息 此处）
2. 创建一个新的CSS文件 app/assets/stylesheets 并将其命名为 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 应该变绿）

h1 {
  color: green;
}

资源

• 非常有用的视频 这里

---

一个单独的问题

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

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 在更改后都没有重新编译。
如果您的 gemfile 中包含 gem jsbundling-rails，请查看 https:// github.com/rails/jsbundling-rails 了解更多详细信息和操作方法。
运行 yarn run build:css 重新编译 CSS 资源。

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

Answer 3

1. 添加新文件 stylesheets/custom.css 并创建新的 css 类。
2. 将导入添加到 application.bootstrap.scss @import "custom";
3. 然后运行 ​​yarn run build:css 重新编译 CSS 资源。
4. 现在，您可以在 builds/application.css 中看到自定义类以及 bootstrap css

将本地服务器运行到 ./bin/dev 以自动构建 CSS 和 JavaScript 更新。

Answer 4

更喜欢使用 foreman 运行应用程序，使用命令 $ bin/dev ，这样它会自动编译 scss 文件。

Answer 5

它对我有用

//= link custom.css

如果我添加到 app/assets/config/manifest.js

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