Я так себе фронтендер, но нужда заставила.
Как настроить поведение WebStorm (2024.2.1) так, чтобы он видел компоненты bootstrap?
Использую Vue3, bootstrap-vue-next (0.24.21), vite - все библиотеки свежайшие.
vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import {BootstrapVueNextResolver} from 'bootstrap-vue-next'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [BootstrapVueNextResolver()],
}),
],
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler' // or "modern"
}
}
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
}
}
})
main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createBootstrap } from 'bootstrap-vue-next'
import router from "./router";
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
import '@assets/scss/app.scss';
import 'bootstrap/dist/js/bootstrap.bundle'
import '@assets/css/theme.css'
createApp(App)
.use(router)
.use(createBootstrap())
.mount('#app');
В настройках WebStorm указал все
Рядом лежит проект на Vue3, bootstrap-vue-next, но без vite, и на более старых версиях bootstrap-vue-next (0.15.5). Там IDE прекрасно видит все бутсраповские компоненты. Но не смог понять, где всё это настраивается.