Как правильно настроить ширину боковой панели CoreUI в vuejs?

Question

Я пытаюсь изменить ширину боковой панели CoreUI. Но в документе coreui не указано, как его изменить.

Я пытаюсь вручную добавить стиль CSS к компоненту Vuejs, но он не работает.

// Вот код из проекта coreui

импорт {боковой панели как AppSidebar} из '@ coreui / vue'

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

Я надеюсь, что кто-нибудь может дать мне ответ на этот вопрос. Большое спасибо

Answer 1

Если вы используете SCSS, переопределите следующие переменные в вашем _variables.scss с вашим предпочтительным размером ширины.Например, следующий код устанавливает боковую панель шириной 250 пикселей.Ширина бренда Navbar установлена ​​немного короче, чтобы позаботиться о кнопке меню.

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