# Template Styles

Here you will find where you can find template styles and how you can modify/override it. Also you will learn where to add your own styles.

# Core styles

@core/scss folder contains template's core styles. In this folder you will:

  • base directory: Holds Template's base style independent of any framework (In this case - VueJS). e.g. Bootstrap components' styles, template layout styles, etc.
  • vue: This folder contains styles for Vue version specific styles which isn't part of base styles. e.g. Some vue extension styles, bootstrap-vue extends, Vue specific page styles, etc.
  • core.scss: This fille will get included in main.js file. This files imports all other styles of templates. So you can say that it is entry point of template styles.

# Writing your styles

You can write your styles in src/assets/scss/style.scss file. You can add your own structure in src/assets/scss/ folder. src/assets/scss/ Folder is completely yours to tweak it except you shall not remove or rename src/assets/scss/variables folder provided by us.

Let's understand what each file has to do with style in src/assets/scss/ folder:

  • style.scss: This files is your entry point of styles. Write your styles in this file or import other files. This file is imported in main.js
  • variables/_variables.scss: You can override bootstrap variables using this file.
  • variables/_variables-components.scss: Use this file to override component variables.

# Using @core for your styles

There might be case that you want to use style from our @core folder.

e.g. You want to create your own FAQ page with some extra components and want to extend our current page. In this case you can create a new SCSS file which imports our faq page style and write your own styles beneath it, just like a normal SCSS import. Lastly just import your newly created file in your SFC(Vue file).

Let's understand what each folder contains:

  • base: Base styles
  • vue/apps: This contains apps' styles. You can import it in your SFC and create your own app with our styles.
  • vue/bootstrap-vue: This is bootstrap-vue extends and overrides of template. You don't have to import them in your SFC.
  • vue/libs: This contains third party packages' styles. You have to import respective file while using third party package. e.g. If you are using vue-select in your page then you need to import vue-select.scss file in your page.
  • vue/pages: This contains styles for template pages. If you want style of specific package import it from this folder.
  • _animation.scss: CSS Animations (Isn't used till now - Might get removed in future updates)
  • _base-extended.scss: Extra styles of component or part of layout which isn't covered in base folder
  • _dark-layout.scss: Extended dark-layout styles from base dark-layout
  • _index.scss: all vue specific styles are imported in this file. And this file is imported in core.scss file.
  • _misc.scss: misc styles
  • _rtl.scss: RTL specific styles. Styles which isn't covered by postcss-rtl or RTL override styles.
  • _transitions.scss: Vue Transition Styles. Used in router transition mainly.

TIP

All SCSS files starting with _[underscore] (SCSS partials) are already imported in template styles so there's no need to import it. Other SCSS Files are meant to get imported only if they are required.

Vue 3 update 📣 ×

We are glad to announce updates on Vue 3 support. You can read common FAQs regarding Vue 3 update here.