fix(astrolabe): Fix CSS loading for Nextcloud apps
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>
This commit is contained in:
co-authored by
Claude Opus 4.5
parent
55312b1032
commit
dd23191987
Vendored
+5
-3
@@ -7,9 +7,10 @@ export default defineConfig({
|
|||||||
build: {
|
build: {
|
||||||
outDir: '.',
|
outDir: '.',
|
||||||
emptyOutDir: false,
|
emptyOutDir: false,
|
||||||
|
cssCodeSplit: false, // Bundle all CSS into entry points (Nextcloud doesn't load CSS chunks)
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
input: {
|
input: {
|
||||||
main: resolve(__dirname, 'src/main.js'),
|
'astrolabe-main': resolve(__dirname, 'src/main.js'),
|
||||||
'astrolabe-adminSettings': resolve(__dirname, 'src/adminSettings.js'),
|
'astrolabe-adminSettings': resolve(__dirname, 'src/adminSettings.js'),
|
||||||
'astrolabe-personalSettings': resolve(__dirname, 'src/personalSettings.js'),
|
'astrolabe-personalSettings': resolve(__dirname, 'src/personalSettings.js'),
|
||||||
},
|
},
|
||||||
@@ -17,9 +18,10 @@ export default defineConfig({
|
|||||||
entryFileNames: 'js/[name].mjs',
|
entryFileNames: 'js/[name].mjs',
|
||||||
chunkFileNames: 'js/[name]-[hash].chunk.mjs',
|
chunkFileNames: 'js/[name]-[hash].chunk.mjs',
|
||||||
assetFileNames: (assetInfo) => {
|
assetFileNames: (assetInfo) => {
|
||||||
// Output CSS to css/ directory, JS/other assets to js/
|
// 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')) {
|
if (assetInfo.name && assetInfo.name.endsWith('.css')) {
|
||||||
return 'css/[name][extname]';
|
return 'css/astrolabe-main.css';
|
||||||
}
|
}
|
||||||
return 'js/[name][extname]';
|
return 'js/[name][extname]';
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user