Extending @vuepress/theme-default does not load default component styles (sidebar, navbar) #1666
Unanswered
nancy1234567890
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Problem Summary
When extending the default theme in VuePress 2, my own custom SCSS and Vue single-file-component styles are applied correctly, but none of the default-theme component styles (e.g., sidebar, navbar, content layout) appear.
Expected
Default theme component styles should load automatically when a custom theme extends @vuepress/theme-default.
Actual
Only my custom SCSS and <style> blocks apply;
no vp-* classes or default theme CSS appear in the final bundle.
I’m using a custom theme that extends @vuepress/theme-default but replaces several components:
/.vuepress/theme/
├── layouts/Layout.vue // custom
├── components/Sidebar.vue // custom
├── components/Navbar.vue // custom
Even though these components override the defaults, I expected the base default-theme styles (layout grid, typography, variables) to remain applied — similar to VuePress 1 behavior.
However, none of the default CSS (e.g., sidebar positioning, navbar background) appears unless I manually import index.scss
Technical Notes
VuePress version 2.0.0-rc.26
Bundler @vuepress/bundler-webpack
Extending pattern:
// index.js
extends: defaultTheme(options)
// client.js
extends: DefaultTheme
Followed the below guide for extending default theme
https://vuepress.vuejs.org/advanced/cookbook/making-a-theme-extendable.html
Beta Was this translation helpful? Give feedback.
All reactions