0

使用 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;
    }
  1. 添加导入到 application.bootstrap.scss

    @import "custom";

  2. yarn run build:css

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

但是当我尝试在 HTML 中使用 id 时,没有添加任何 CSS。为什么?我应该把它放在别的地方吗?

编辑: 我让它运行了,但只有当我手动运行 rails assets:precompile 然后 bin/dev 时。为什么每次更改时都需要预编译?

4

0 回答 0