Q&A
私はscss得意ではないので回答はできないかも、ですが
ERROR in ./app/javascript/stylesheets/application.scss
：
remote: ParserError: Syntax Error at line: 1, column 25
とありますから、このcodeを載せてはどうでしょう
Rails 6.1.4.1
Ruby on Railsでアプリ制作を行っている初心者です。
bootstrap5インストール前まではherokuにデプロイできていたのですが、インストールした直後にエラーが出てデプロイできなくなりました。なお、gitには問題なくpushできており、localhost:3000のデベロッパーツールのconsoleにはエラーが出ていません。
インストール方法は以下のサイトのwebpackerの方で行いました。
https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a
./app/javascript/stylesheets/application.scssの中身は以下の一行になっています。
scss
1@import '~bootstrap/scss/bootstrap';
bootstrap4をインストールしてみてherokuにデプロイも試しましたが、デプロイできませんでした。
herokuにデプロイできない原因と対処方法を教えてほしいです。
エラーメッセージは以下になります。
Ruby
1･･･(中略) 2remote: ERROR in ./app/javascript/stylesheets/application.scss 3remote: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): 4remote: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): 5remote: ParserError: Syntax Error at line: 1, column 25 6remote: at /tmp/build_a5aef337/app/javascript/stylesheets/application.scss:6:7298 7remote: at Parser.error (/tmp/build_a5aef337/node_modules/postcss-values-parser/lib/parser.js:127:11) 8remote: at Parser.operator (/tmp/build_a5aef337/node_modules/postcss-values-parser/lib/parser.js:162:20) 9remote: at Parser.parseTokens (/tmp/build_a5aef337/node_modules/postcss-values-parser/lib/parser.js:245:14) 10remote: at Parser.loop (/tmp/build_a5aef337/node_modules/postcss-values-parser/lib/parser.js:132:12) 11remote: at Parser.parse (/tmp/build_a5aef337/node_modules/postcss-values-parser/lib/parser.js:51:17) 12remote: at parse (/tmp/build_a5aef337/node_modules/postcss-custom-properties/index.cjs.js:47:30) 13remote: at /tmp/build_a5aef337/node_modules/postcss-custom-properties/index.cjs.js:333:24 14remote: at /tmp/build_a5aef337/node_modules/postcss/lib/container.js:194:18 15remote: at /tmp/build_a5aef337/node_modules/postcss/lib/container.js:139:18 16remote: at Rule.each (/tmp/build_a5aef337/node_modules/postcss/lib/container.js:105:16) 17remote: at Rule.walk (/tmp/build_a5aef337/node_modules/postcss/lib/container.js:135:17) 18remote: at /tmp/build_a5aef337/node_modules/postcss/lib/container.js:152:24 19remote: at Root.each (/tmp/build_a5aef337/node_modules/postcss/lib/container.js:105:16) 20remote: at Root.walk (/tmp/build_a5aef337/node_modules/postcss/lib/container.js:135:17) 21remote: at Root.walkDecls (/tmp/build_a5aef337/node_modules/postcss/lib/container.js:192:19) 22remote: at transformProperties (/tmp/build_a5aef337/node_modules/postcss-custom-properties/index.cjs.js:330:8) 23remote: at Object.syncTransform [as plugin] (/tmp/build_a5aef337/node_modules/postcss-custom-properties/index.cjs.js:522:5) 24remote: at /tmp/build_a5aef337/node_modules/postcss-preset-env/index.js:443:97 25remote: at /tmp/build_a5aef337/node_modules/webpack/lib/NormalModule.js:316:20 26remote: at /tmp/build_a5aef337/node_modules/loader-runner/lib/LoaderRunner.js:367:11 27remote: at /tmp/build_a5aef337/node_modules/loader-runner/lib/LoaderRunner.js:233:18 28remote: at context.callback (/tmp/build_a5aef337/node_modules/loader-runner/lib/LoaderRunner.js:111:13) 29remote: at /tmp/build_a5aef337/node_modules/postcss-loader/src/index.js:208:9 30remote: @ ./app/javascript/packs/application.js 5:151-186 31remote: Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/sass-loader/dist/cjs.js??ref--6-3!app/javascript/stylesheets/application.scss: 32remote: Entrypoint mini-css-extract-plugin = * 33remote: [0] ./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss 1.81 KiB {0} [built] [failed] [1 error] 34 35･･･(同じ文のエラー) 36 37remote: DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. 38remote: 39remote: Recommendation: math.div($spacer, 4) 40remote: 41remote: More info and automated migrator: https://sass-lang.com/d/slash-div 42remote: 43remote: ╷ 44remote: 253 │ 1: $spacer / 4, 45remote: │ ^^^^^^^^^^^ 46remote: ╵ 47remote: node_modules/bootstrap/scss/_variables.scss 253:6 @import 48remote: node_modules/bootstrap/scss/bootstrap.scss 11:9 @import 49remote: app/javascript/stylesheets/application.scss 1:9 root stylesheet 50remote: 51remote: DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. 52remote: 53remote: Recommendation: math.div($spacer, 2) 54remote: 55remote: More info and automated migrator: https://sass-lang.com/d/slash-div 56remote: 57remote: ╷ 58remote: 254 │ 2: $spacer / 2, 59remote: │ ^^^^^^^^^^^ 60remote: ╵ 61remote: node_modules/bootstrap/scss/_variables.scss 254:6 @import 62remote: node_modules/bootstrap/scss/bootstrap.scss 11:9 @import 63remote: app/javascript/stylesheets/application.scss 1:9 root stylesheet 64remote: 65remote: DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. 66remote: 67remote: Recommendation: math.div($grid-gutter-width, 2) 68remote: 69remote: More info and automated migrator: https://sass-lang.com/d/slash-div 70remote: 71remote: ╷ 72remote: 353 │ $container-padding-x: $grid-gutter-width / 2 !default; 73remote: │ ^^^^^^^^^^^^^^^^^^^^^^ 74remote: ╵ 75remote: node_modules/bootstrap/scss/_variables.scss 353:23 @import 76remote: node_modules/bootstrap/scss/bootstrap.scss 11:9 @import 77remote: app/javascript/stylesheets/application.scss 1:9 root stylesheet 78remote: 79remote: DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. 80remote: 81remote: Recommendation: math.div($spacer, 2) 82remote: 83remote: More info and automated migrator: https://sass-lang.com/d/slash-div 84remote: 85remote: ╷ 86remote: 464 │ $headings-margin-bottom: $spacer / 2 !default; 87remote: │ ^^^^^^^^^^^ 88remote: ╵ 89remote: node_modules/bootstrap/scss/_variables.scss 464:31 @import 90remote: node_modules/bootstrap/scss/bootstrap.scss 11:9 @import 91remote: app/javascript/stylesheets/application.scss 1:9 root stylesheet 92remote: 93remote: DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. 94remote: 95remote: Recommendation: math.div($input-padding-y, 2) 96remote: 97remote: More info and automated migrator: https://sass-lang.com/d/slash-div 98remote: 99remote: ╷ 100remote: 720 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default; 101remote: │ ^^^^^^^^^^^^^^^^^^^^ 102remote: ╵ 103remote: node_modules/bootstrap/scss/_variables.scss 720:73 @import 104remote: node_modules/bootstrap/scss/bootstrap.scss 11:9 @import 105remote: app/javascript/stylesheets/application.scss 1:9 root stylesheet 106remote: 107remote: WARNING: 71 repetitive deprecation warnings omitted. 108remote: ! 109remote: ! Precompiling assets failed. 110remote: ! 111remote: ! Push rejected, failed to compile Ruby app. 112remote: 113remote: ! Push failed 114remote: Verifying deploy... 115remote: 116remote: ! Push rejected to faq-app-rails. 117remote: 118To https://git.heroku.com/faq-app-rails.git 119 ! [remote rejected] master -> master (pre-receive hook declined) 120error: failed to push some refs to 'https://git.heroku.com/faq-app-rails.git'
回答ありがとうございます。./app/javascript/stylesheets/application.scssの中身を質問内容に投稿しました。もし分かりましたらご回答よろしくお願いいたします。
半日調べていましたが、全く分かりませんでした･･･。
回答1件
0
@import '~bootstrap/scss/bootstrap';
の頭の ~ があやしげ。
この書き方は bashなら user bootstrapのhome という意味ですが、railsのなかでそれが通用するとは思えない。
scss/bootstrap というのはどこに置いてありますか？
投稿2021/10/10 23:26
総合スコア23416
質問内容にあるQiitaの記事を見て作成しましたが、そこにはscss/bootstrapのファイルを作成するような手順はなかったので、scss/bootstrapのファイルはどこにも作成していません。
あなたの回答
tips
プレビュー
