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

syutran · December 19, 2021 · Last by flyweights replied at January 24, 2022 · 1267 hits

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,这是个有待改进的地方。

Reply to Rei

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

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

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

可以看看这个repo

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

You need to Sign in before reply, if you don't have an account, please Sign up first.