Chris Coutinho
dd23191987
Two issues prevented CSS from loading correctly:
1. Entry point naming mismatch: Vite output `main.css` but Nextcloud's
`Util::addStyle('astrolabe', 'astrolabe-main')` expected `astrolabe-main.css`
2. CSS code splitting: Vite extracted @nextcloud/vue component styles
into separate chunks (e.g., NcUserBubble-*.css) that Nextcloud doesn't
load automatically. Without these styles, the UI rendered incorrectly.
Changes:
- Rename entry point from `main` to `astrolabe-main`
- Add `cssCodeSplit: false` to bundle all CSS into the entry point
- Update assetFileNames to output consistent `astrolabe-main.css`
This increases CSS bundle from 11KB to 286KB but ensures all component
styles are available when the page loads.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
34 lines
1.1 KiB
JavaScript
34 lines
1.1 KiB
JavaScript
import { defineConfig } from 'vite'
|
|
import vue from '@vitejs/plugin-vue'
|
|
import { resolve } from 'path'
|
|
|
|
export default defineConfig({
|
|
plugins: [vue()],
|
|
build: {
|
|
outDir: '.',
|
|
emptyOutDir: false,
|
|
cssCodeSplit: false, // Bundle all CSS into entry points (Nextcloud doesn't load CSS chunks)
|
|
rollupOptions: {
|
|
input: {
|
|
'astrolabe-main': resolve(__dirname, 'src/main.js'),
|
|
'astrolabe-adminSettings': resolve(__dirname, 'src/adminSettings.js'),
|
|
'astrolabe-personalSettings': resolve(__dirname, 'src/personalSettings.js'),
|
|
},
|
|
output: {
|
|
entryFileNames: 'js/[name].mjs',
|
|
chunkFileNames: 'js/[name]-[hash].chunk.mjs',
|
|
assetFileNames: (assetInfo) => {
|
|
// With cssCodeSplit:false, all CSS goes to a single file
|
|
// Name it astrolabe-main.css to match Nextcloud's Util::addStyle expectation
|
|
if (assetInfo.name && assetInfo.name.endsWith('.css')) {
|
|
return 'css/astrolabe-main.css';
|
|
}
|
|
return 'js/[name][extname]';
|
|
},
|
|
},
|
|
},
|
|
sourcemap: true,
|
|
minify: 'terser',
|
|
},
|
|
})
|