如何在 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;

Answer 2

对于 coreui 中的侧边栏宽度，您可以覆盖 _variables.scss 文件中的 $sidebar-width scss 变量

// Variable overrides

$sidebar-width: 300px;