如何在 vuejs 中正确调整 CoreUI 侧边栏宽度？

Question

我尝试更改 CoreUI 侧边栏宽度。但是在coreui文档中并没有具体说明怎么改。

我尝试手动将 css 样式添加到 Vuejs 组件，但它不起作用。

// 这里是coreui proejct的代码

从 '@coreui/vue' 导入 { Sidebar as AppSidebar }

  <AppSidebar fixed>
    <SidebarHeader/>
    <SidebarForm/>
    <SidebarNav :navItems="nav"></SidebarNav>
    <SidebarFooter/>
    <SidebarMinimizer/>
  </AppSidebar>

我希望任何人都可以为我提供这个问题的答案。非常感谢

Answer 1

如果您使用 SCSS，请_variables.scss使用您首选的宽度大小覆盖以下变量。例如下面的代码将侧边栏设置为 250px 宽。导航栏品牌宽度设置得稍短，以照顾菜单按钮。

// Variable overrides
$navbar-brand-width:                  205px !default;
$sidebar-width:                       250px !default;