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

Question

我尝试更改CoreUI边栏宽度。但是它在coreui文档中没有指定如何更改它。

我尝试将CS​​S样式手动添加到Vuejs组件，但无法解决。

//这是来自coreui项目的代码

从'@ coreui / vue'导入{侧边栏作为AppSidebar}

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

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

Answer 1

如果您使用的是SCSS，请使用您喜欢的宽度大小覆盖_variables.scss中的以下变量。例如，以下代码将边栏设置为250px宽。将Navbar品牌宽度设置为稍短一些，以便照顾菜单按钮。

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

Answer 2

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

// Variable overrides

$sidebar-width: 300px;