Can't display bootstrap after changing to rails 7 and dart-sass

Question

After changing Rails 7 and dart-sass, My app can't display js (bootstrap menu).

I think it happened because I couldn't set the right path, or change the way of writing from node-sass to dart-sass.

I watched my app on localhost and checked to develop mode.

    application.js:1 Uncaught Error: Cannot find module 'app/javascript/src/application.scss'
    Uncaught Error: Cannot find module 'app/javascript/src/application.scss'
    at webpackMissingModule (application.js:1:1)
    at Module../app/javascript/packs/application.js (application.js:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at bootstrap:83:1
    at bootstrap:83:1
    webpackMissingModule @ application.js:1
    ./app/javascript/packs/application.js @ application.js:1
    __webpack_require__ @ bootstrap:19
    (anonymous) @ bootstrap:83
    (anonymous) @ bootstrap:83
    
    count.js:2 
    Uncaught ReferenceError: $ is not defined
    at Object../app/javascript/packs/count.js (count.js:2:1)
    at __webpack_require__ (bootstrap:19:1)
    at bootstrap:83:1
    at bootstrap:83:1

    app/javascript/src/app.scss
    @import '~bootstrap/scss/bootstrap';

   app/javascript/packs/app.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import "bootstrap";
import "app/javascript/src/application.scss";

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

   app/javascript/packs/count.js
// jquery書きはじめ
$(function (){
  // 処理（ページが読み込まれた時、フォームに残り何文字入力できるかを数えて表示する）

  //フォームに入力されている文字数を数える
  //\nは"改行"に変換して2文字にする。オプションフラグgで文字列の最後まで\nを探し変換する
  let count = $(".js-text").text().replace(/\n/g, "改行").length;
  //残りの入力できる文字数を計算
  let now_count = 200 - count;
  //文字数がオーバーしていたら文字色を赤にする
  if (count > 200) {
    $(".js-text-count").css("color","red");
  }
  //残りの入力できる文字数を表示
  $(".js-text-count").text( "残り" + now_count + "文字");

  $(".js-text").on("keyup", function() {
    // 処理（キーボードを押した時、フォームに残り何文字入力できるかを数えて表示する）
    //フォームのvalueの文字数を数える
    let count = $(this).val().replace(/\n/g, "改行").length;
    let now_count = 200 - count;

    if (count > 200) {
      $(".js-text-count").css("color","red");
    } else {
      $(".js-text-count").css("color","black");
    }
    $(".js-text-count").text( "残り" + now_count + "文字");
  });
});

I searched some docs, but I couldn't find them about changing paths and the way of writing node-sass to dart-sass rails.

I already add dart-sass rails gem.

Please give me some advice if you know some hints or docs for dart-sass rails.

Answer 1

I was in a similar situation. Running rails dartsass:watch helped me by showing the error on the import line. Added gem "bootstrap" to my gemfile. Used @import "bootstrap"; in app/assets/stylesheets/application.scss and the css came through.