vite rails

application.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 'vite/dynamic-import-polyfill'
import { Turbo } from '@hotwired/turbo-rails'
import LocalTime from 'local-time'
import debounced from 'debounced'

import '../channels'
import '../controllers'
import '../time_zone'
// import '../components'
import 'popper.js'
import 'bootstrap'
import '../stylesheets/application.scss'

import * as ActiveStorage from '@rails/activestorage'

// Rails.start()
// Turbolinks.start()
ActiveStorage.start()
debounced.initialize()
Turbo.start()
LocalTime.start()

vite.config.ts

/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import { babel } from '@rollup/plugin-babel'
import StimulusHMR from 'vite-plugin-stimulus-hmr'

export default defineConfig({
  plugins: [RubyPlugin(), StimulusHMR(), babel({ babelHelpers: 'bundled' })],
  // plugins: [RubyPlugin(), StimulusHMR()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: "@import '~/stylesheets/global.scss';",
      },
    },
  },
})

vite.json

{
  "all": {
    "sourceCodeDir": "app/assets",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test"
  }
}