SCSS
Structure
Vixon Nextjs has managed the scss file in the src/assets/scss folder. You can add your custom scss in the custom.scss file instead of doing changes in the app.scss or other scss files as it will create conflicts in future updates.
Variables Structure
We have defined all the variables in the src/assets/scss/ folder.
_variables.scss- All bootstrap variables are defined in this file.
Custom Structure
You can add your custom scss in this src/assets/scss/custom.scss file.
custom.scss
Other SCSS file Structure
We have created all the scss files in the src/assets/scss folder.
- apps
- All apps related scss files are created in this folder.
- components
- All components related scss files are created in this folder.
- fonts
- All fonts are imported in this scss file.
- pages
- All the pages related to scss are written in this folder and page wise scss created i.e. _authentication.scss, _chat.scss, _dashboard.scss etc
- plugins
- All the plugins ( Apex chart, ckeditor, full calendar etc ) are created in the plugins folder.
- icons.scss
- All icons scss are imported in this file.
Quick customization of layout using scss.
You can make changes in the
src/assets/scss/theme/_*.scss file.
| Variables | Description |
|---|---|
$primary: $blue; $secondary: $indigo; $success: $green; $info: $teal; $warning: $yellow; $danger: $red; $light: $gray-200; $dark: $gray-900; |
You can manage those colors to update the color theme. |
--#{$prefix}font-sans-serif: "Poppins" ,sans-serif;;
--#{$prefix}font-monospace: "Poppins" ,sans-serif;
|
You can set the default font in these variables. |
--#{$prefix}vertical-menu-width: 250px;
--#{$prefix}vertical-menu-width-md: 180px;
--#{$prefix}vertical-menu-width-sm: 70px;
--#{$prefix}twocolumn-menu-width: 220px
--#{$prefix}twocolumn-menu-iconview-width: 70px
|
Set the sidebar menu with these variables. |