Rails Rails 7 --css bootstrap 报错问题的解决方法

syutran · 2021年12月19日 · 最后由 flyweights 回复于 2022年01月24日 · 1328 次阅读

Rails 7 使用 tailwindcss 没问题,使用 bootstrap 有个小 bug。


rails new blog --css bootstrap
#启动服务后
The asset "application.css" is not present in the asset pipeline.

The asset "application.js" is not present in the asset pipeline.

这两个错是分别报的。

解决方法:需要在 package.json 插入编译代码:


# package.json 文件
{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.0",
    "@popperjs/core": "^2.11.0",
    "bootstrap": "^5.1.3",
    "esbuild": "^0.14.5",
    "sass": "^1.45.0"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/build/application.css --no-source-map --load-path=node_modules"
  }
}

使用命令行编译:

yarn build
# 生成 app/assset/builds/application.js 
#application.html.erb 中 include_tag 找的就是这个文件
yarn build:css
# 生成 app/assets/build/application.css 
# application.html.erb 中 link_tag 找的就是这个文件

不然,会报找不到这两个文件的错。

在 Procfile.dev 里是有这两行命令,但 new 脚本没有把 scripts 写到 package.json 里去。

如果用 cssbundling-rails 和 jsbundling-rails 这两个 gem 的话,启动 rails 就不要用 rails s了,不知道你有没有试一下用bin/dev? 应该是不需要手动 yarn 的。

bin/dev

https://github.com/rails/cssbundling-rails/blob/b1897ff79a794370612e6f4aeffdc6f4de584c07/lib/install/bootstrap/install.rb#L16-L21

根据 install 的源码,似乎是需要有 npx 命令才会自动添加构建脚本,不然只会输出一段提示(容易被忽略)。也就是既要安装 npm 又要安装 yarn,这是个有待改进的地方。

Rei 回复

可是,npm/npx 不是应该安装完 node,default 就会一并安装的吗?

我也是才发现,要用 bin/dev 才能把 application.css 产生出来

https://ruby-china.org/topics/41990

可以看看这个repo

charlie_hsieh 回复

Ubuntu 的包都拆开,可以装 node 不装 npm。

rails new demo --css taiwind 也有个 bug,你修改了 erb 文件想看看效果,十有一、二不刷新,得重新 bin/dev 才能看到效果。

刚尝试了下,并未复现你说的问题。
ruby version 3.0.3
rails version 7.0.0
OS version fedora 35
yarn version 1.22.10
node version 16.13.1
npm version 8.3.0

需要 登录 后方可回复, 如果你还没有账号请 注册新账号