LoginSignup
3
1

More than 1 year has passed since last update.

@Kazukiya

Rails7で'rails new'するさいにBootstrapを指定するとエラーが発生してしまう

Last updated at Posted at 2023-07-26

環境

  • ruby: ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-darwin21]
  • rails: Rails 7.0.6
  • node: v15.14.0
  • yarn: 1.22.19

現状

rails new . -c=bootstrap

最後でこのようなエラーが出る

yarn run v1.22.19
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
rbenv: sass: command not found

The `sass' command exists in these Ruby versions:
  2.5.1
  2.6.3
  2.6.4
  2.6.6
  2.7.4

error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Add build:css:prefix script
         run  npm set-script build:css:prefix "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css" from "."
         run  yarn build:css:prefix from "."
yarn run v1.22.19
$ postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css
/bin/sh: postcss: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Add build:css script
         run  npm set-script build:css "yarn build:css:compile && yarn build:css:prefix" from "."
         run  yarn build:css from "."
yarn run v1.22.19
$ yarn build:css:compile && yarn build:css:prefix
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
rbenv: sass: command not found

The `sass' command exists in these Ruby versions:
  2.5.1
  2.6.3
  2.6.4
  2.6.6
  2.7.4

error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Add watch:css script
         run  npm set-script watch:css "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\"" from "."
        gsub  Procfile.dev
Add browserslist config
         run  npm pkg set browserslist[]=defaults from "."
Unknown command: "pkg"

To see a list of supported npm commands, run:
  npm help

ここから./bin/devでローカルを立ち上げようとすると下記のようなエラーが出る

23:02:40 js.1   | $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --watch
23:02:40 css.1  | $ nodemon --watch ./app/assets/stylesheets/ --ext scss --exec "yarn build:css"
23:02:40 css.1  | /bin/sh: nodemon: command not found
23:02:40 css.1  | error Command failed with exit code 127.
23:02:40 css.1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
23:02:40 js.1   | [watch] build finished, watching for changes...
23:02:40 js.1   | ✘ [ERROR] Could not resolve "bootstrap"
23:02:40 js.1   | 
23:02:40 js.1   |     app/javascript/application.js:4:27:
23:02:40 js.1   |       4 │ import * as bootstrap from "bootstrap"
23:02:40 js.1   |         ╵                            ~~~~~~~~~~~
23:02:40 js.1   | 
23:02:40 js.1   |   You can mark the path "bootstrap" as external to exclude it from the bundle, which will remove this error.
23:02:40 js.1   | 
23:02:40 js.1   | 1 error

原因

これは生成された新規プロジェクトのpackage.jsonに必要なパッケージが追加されていない

package.json
{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.2.1",
    "@hotwired/turbo-rails": "^7.3.0",
    "esbuild": "^0.18.17"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:css": "yarn build:css:compile && yarn build:css:prefix",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
  }
}

ここに『sass』『postcss』『nodemon』などのパッケージが入っていないため、エラーになってしまう。

解決策

おそらく、上記のパッケージを後から追加すれば動くかもしれないが、今回は別の手段を取る

それは、yarnのバージョンを3系に上げてからrails newすることになる

詳しくは下記の記事を参照

yarnのバージョンの上げ方

新規フォルダを作成し、そこでyarnのバージョンを上げるコマンドを打つ

yarn set version berry

yarn v2本体のグローバルインストールは原則として行わず、 yarn v1からロードして使うことが推奨されてるようなので、プロジェクト立ち上げるさいは、都度やる必要あり（？）

すると、yarnのバージョンが上がるはずなので、yarn -vで確認

3.6.1

3系に上がっていたらyarnのバージョンを上げるコマンドを打ったさいに生成された.yarnrc.ymlに下記を追加

.yarnrc.yml
nodeLinker: node-modules

それからrails newをするとエラーなく新規プロジェクトが生成される

Install Bootstrap with Bootstrap Icons, Popperjs/core and Autoprefixer
      create  app/assets/stylesheets/application.bootstrap.scss
         run  yarn add sass bootstrap bootstrap-icons @popperjs/core postcss postcss-cli autoprefixer nodemon from "."
➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0000: └ Completed in 3s 184ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ y18n@npm:5.0.8 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yallist@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yaml@npm:2.3.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs-parser@npm:21.1.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs@npm:17.7.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 0s 415ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 1s 650ms
➤ YN0000: Done with warnings in 5s 284ms
      insert  config/initializers/assets.rb
Appending Bootstrap JavaScript import to default entry point
      append  app/javascript/application.js
Add build:css:compile script
         run  npm set-script build:css:compile "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" from "."
         run  yarn build:css:compile from "."
Add build:css:prefix script
         run  npm set-script build:css:prefix "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css" from "."
         run  yarn build:css:prefix from "."
Add build:css script
         run  npm set-script build:css "yarn build:css:compile && yarn build:css:prefix" from "."
         run  yarn build:css from "."
Add watch:css script
         run  npm set-script watch:css "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\"" from "."
        gsub  Procfile.dev
Add browserslist config
         run  npm pkg set browserslist[]=defaults from "."
Unknown command: "pkg"

To see a list of supported npm commands, run:
  npm help

このときのpackage.jsonの中身は以下になる

package.json
{
  "packageManager": "yarn@3.6.1",
  "dependencies": {
    "@hotwired/stimulus": "^3.2.1",
    "@hotwired/turbo-rails": "^7.3.0",
    "@popperjs/core": "^2.11.8",
    "autoprefixer": "^10.4.14",
    "bootstrap": "^5.3.1",
    "bootstrap-icons": "^1.10.5",
    "esbuild": "^0.18.17",
    "nodemon": "^3.0.1",
    "postcss": "^8.4.27",
    "postcss-cli": "^10.1.0",
    "sass": "^1.64.1"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:css": "yarn build:css:compile && yarn build:css:prefix",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
  },
  "browserslist": [
    "defaults"
  ]
}

『sass』『postcss』『nodemon』などのパッケージが含まれているのがわかる

これでローカルも立ち上がる

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1