Después de cambiar Rails 7 y dart-sass, Mi aplicación no puede mostrar js (menú de arranque).

Creo que sucedió porque no pude establecer el camino correcto o cambiar la forma de escribir de node-sass a dart-sass.

Vi mi aplicación en localhost y verifiqué el modo de desarrollo.

    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 + "文字");
  });
});

Busqué algunos documentos, pero no pude encontrarlos sobre el cambio de rutas y la forma de escribir node-sass en rieles de dart-sass.

Ya agregué gema de rieles dart-sass.

Por favor, dame algunos consejos si conoces algunos consejos o documentos para los rieles Dart-sass.

no se encontró respuesta