在切换到rails 7和dart-sass后无法显示引导程序。

Question

在更改Rails 7和dart-sass之后，我的应用程序无法显示js (引导菜单)。

我认为发生这种情况是因为我无法设定正确的路径，或者将写作方式从节点sass更改为dart-sass。

我在本地主机上观看了我的应用程序，并检查了开发模式。

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

我搜索了一些文档，但是找不到关于改变路径和将节点sass写成省道轨的方法。

我已经添加了飞镖-sass rails宝石。

如果你知道飞镖轨道的一些提示或文档，请给我一些建议。

Answer 1

我也遇到过类似的情况。运行rails dartsass:watch有助于我在导入行上显示错误。将gem "bootstrap"添加到我的gemfile文件中。在@import "bootstrap";中使用app/assets/stylesheets/application.scss和css。