rails7においてのbootstrapのインストールでのエラー #16

yogi1116 · 2023-12-09T17:22:42Z

rails7.1においてbootstrapをインストールするには、cssbundling-railsをインストールする必要があるようなので

下記のコマンドでcssbundling-railsをインストール

$ bundle add cssbundling-rails

下記のコマンドでbootstrap5(CSS)をインストール

$ rails css:install:bootstrap

Bootstrap5(JS)を導入する

$ ruby bin/importmap pin bootstrap

CSSをビルドする（下記のエラーが発生）

$ yarn build:css
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
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

   ╷
57 │   $dividend: abs($dividend);
   │              ^^^^^^^^^^^^^^
   ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 57:14         divide()
    node_modules/bootstrap/scss/mixins/_grid.scss 59:12        row-cols()
    node_modules/bootstrap/scss/mixins/_grid.scss 85:13        @content
    node_modules/bootstrap/scss/mixins/_breakpoints.scss 68:5  media-breakpoint-up()
    node_modules/bootstrap/scss/mixins/_grid.scss 72:5         make-grid-columns()
    node_modules/bootstrap/scss/_grid.scss 38:3                @import
    bootstrap/scss/bootstrap.scss 20:9                         @import
    app/assets/stylesheets/application.bootstrap.scss 1:9      root stylesheet

Error: Can't find stylesheet to import.
  ╷
2 │ @import 'bootstrap-icons/font/bootstrap-icons';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  app/assets/stylesheets/application.bootstrap.scss 2:9  root stylesheet
error Command failed with exit code 65.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 65.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The text was updated successfully, but these errors were encountered:

yogi1116 · 2023-12-10T01:22:37Z

bootstrapをインストールする手順で自動的に追加されたapplication.bootstrap.scssファイルの中身です。

@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';

しかし、bootstrapしか使用しないためbootstrap-iconsの行を消し、下記の状態にする

@import 'bootstrap/scss/bootstrap';

再度$ yarn build:css実施
すると$dividend: abs($dividend);のみになった。

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
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

   ╷
57 │   $dividend: abs($dividend);
   │              ^^^^^^^^^^^^^^
   ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 57:14         divide()
    node_modules/bootstrap/scss/mixins/_grid.scss 59:12        row-cols()
    node_modules/bootstrap/scss/mixins/_grid.scss 85:13        @content
    node_modules/bootstrap/scss/mixins/_breakpoints.scss 68:5  media-breakpoint-up()
    node_modules/bootstrap/scss/mixins/_grid.scss 72:5         make-grid-columns()
    node_modules/bootstrap/scss/_grid.scss 38:3                @import
    bootstrap/scss/bootstrap.scss 20:9                         @import
    app/assets/stylesheets/application.bootstrap.scss 1:9      root stylesheet

$ 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.
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

yogi1116 · 2023-12-10T02:19:54Z

twbs/bootstrap#39028
上記をもとに、以下を訂正

//node_modules/bootstrap/scss/vendor/_rfs.scss fileのページ先頭に下記を追加

@use 'sass:math';


//以下を削除し追加
- $dividend: abs($dividend);
+ $dividend: math.abs($dividend);

再度$ yarn build:cssを実施し、$dividend: abs($dividend);は解決したがエラー自体は解決しなかった。

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
$ 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.
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

yogi1116 · 2023-12-10T02:24:48Z

yarn add postcssをインストール
再度$ yarn build:css実施したがエラー解消されず

yarn build:css  
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
Error: Can't find stylesheet to import.
  ╷
1 │ @import 'bootstrap/scss/bootstrap';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  app/assets/stylesheets/application.bootstrap.scss 1:9  root stylesheet
error Command failed with exit code 65.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 65.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

yarn add bootstrapを実施
再度$ yarn build:css実施したがエラー解消されず

yarn build:css    
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
$ 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.
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

yogi1116 · 2023-12-10T04:03:02Z

一度git reset --hardでディレクトリを元に戻し消えてないファイルを削除。

bootstrapのインストール開始
$ bundle add cssbundling-rails実行
$ rails css:install:bootstrapのコマンドでエラーが発生してることに気づいた

error postcss-load-config@5.0.2: The engine "node" is incompatible with this module. Expected version ">= 18". Got "16.17.0"
error Found incompatible module.

 postcss: command not found
error Command failed with exit code 127.

Error: Can't find stylesheet to import.
  ╷
2 │ @import 'bootstrap-icons/font/bootstrap-icons';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  app/assets/stylesheets/application.bootstrap.scss 2:9  root stylesheet
error Command failed with exit code 65.

原因がnode.jsのバージョンが18以下であること、postcssがインストールされてないためと思われ、
それぞれインストールした。（ちなみに再度git reset -hardしてから）

すると$ rails css:install:bootstrapのコマンドでエラーが解消された。
$ ruby bin/importmap pin bootstrapインストール
さらに問題の$ yarn build:cssのインストールも無事成功

yarn run v1.22.21
warning package.json: No license field
$ yarn build:css:compile && yarn build:css:prefix
warning package.json: No license field
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
warning package.json: No license field
$ postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css
✨  Done in 1.99s.

yogi1116 · 2023-12-10T08:54:55Z

./bin/devコマンドを実行すると下記のエラーが発生した

Error: Can't find stylesheet to import.
13:03:21 css.1  |   ╷
13:03:21 css.1  | 1 │ @use 'bootstrap/scss/bootstrap';
13:03:21 css.1  |   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Rails 7.1.1 で cssbundling-rails と dartsass-rails を使っている場合、application.scssで
application.bootstrap.cssを読み込む必要はない。
Rails 7 以降は、CSSのバンドルは cssbundling-rails によって管理されていて
application.scssはもはやスタイルシートのエントリポイントとして機能しないらしい。

なので、application.scssの内容をapplication.bootstrap.scssに移行した。

//applicatiion.boostrap.cssの内容

@use 'bootstrap/scss/bootstrap';
@use 'bootstrap-icons/font/bootstrap-icons';
@use 'top';

再度./bin/devを実施したところ、エラーが解決されブラウザ上にcssが反映された。

yogi1116 · 2023-12-10T17:39:34Z

bootstrap-iconsを反映させるにもひと工夫必要。
$ yarn add bootstrap-iconsでbootstrap-iconsをインストール

application.bootstrap.scssにて下記のコードの記載を確認。（自動で追加されてるはず）

@use 'bootstrap-icons/font/bootstrap-icons';

node_modulesディレクトリ内にあるSVGスプライトファイルbootstrap-icons.svg（自動追加されてる）を
publicディレクトリ（例えばpublic/icons）に配置すると、ブラウザから直接アクセスできるようにする。
node_modulesだと直接ブラウザから参照することができないため。

上記の設定をすることでbootstrap-iconsを参照できるようになる設定は完了。

htmlのファイルにて下記のような記載をすればブラウザに反映される。

<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="/icons/bootstrap-icons.svg#speedometer2"></use></svg>

上記のhref="/icons/bootstrap-icons.svg部分にpublicフォルダのパスを書くことに注意すること。

yogi1116 closed this as completed Dec 10, 2023

yogi1116 reopened this Dec 10, 2023

yogi1116 closed this as completed Dec 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

rails7においてのbootstrapのインストールでのエラー #16

rails7においてのbootstrapのインストールでのエラー #16

yogi1116 commented Dec 9, 2023 •

edited

Loading

yogi1116 commented Dec 10, 2023 •

edited

Loading

yogi1116 commented Dec 10, 2023

yogi1116 commented Dec 10, 2023

yogi1116 commented Dec 10, 2023

yogi1116 commented Dec 10, 2023

yogi1116 commented Dec 10, 2023

rails7においてのbootstrapのインストールでのエラー #16

rails7においてのbootstrapのインストールでのエラー #16

Comments

yogi1116 commented Dec 9, 2023 • edited Loading

yogi1116 commented Dec 10, 2023 • edited Loading

yogi1116 commented Dec 10, 2023

yogi1116 commented Dec 10, 2023

yogi1116 commented Dec 10, 2023

yogi1116 commented Dec 10, 2023

yogi1116 commented Dec 10, 2023

yogi1116 commented Dec 9, 2023 •

edited

Loading

yogi1116 commented Dec 10, 2023 •

edited

Loading