不使用Rails 7的CSS捆绑的自定义CSS

Question

玩Rails 7，我不明白为什么我的定制CSS不能工作。

我建立了新的rails应用程序，标志为Bootstrap，运行良好(CSS和JS，用引导模式测试)。这些是我的默认配置文件：

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/application.css中建立CSS。

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

1. 使用css添加了新文件stylesheets/custom.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资产时:预编译，然后是bin/dev。为什么每次更改时都需要预编译？

Answer 1

在一个新的rails 7应用程序(使用css=bootstrap)中，下面是我为获得定制的css样式所做的工作：

1. 在Gemfile中取消注释gem 'sass-rails，然后捆绑安装(关于该这里的更多信息)
2. 在app/assets/样式表中创建一个新的css文件并将其命名为example.css.scss
3. 将这一行添加到app/assets/config/plex.js：

//= link example.css

1. 在您需要访问这些样式的任何地方，都要包括以下标记

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

1. 使用bin/dev而不是rails server启动服务器
2. 一切都应该正常工作(一个很好的测试是将其包含在example.css.scss文件中，H1s应该变成绿色)

h1 {
  color: green;
}

资源

• 非常有用的视频这里

Answer 2

我只是遇到了这个问题，并注意到JavaScript和CSS都不会在更改后重新编译。如果您将gem jsbundling-rails包含在您的how文件中，请查看https://github.com/rails/jsbundling-rails以获得更多细节和方法-tos。运行yarn run build:css重新编译CSS资产。

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

Answer 3

您需要在CSS/JS中更改后预编译资产。

rails assets:precompile