Styles customization

Vue scss tutorial

Prerequisites

Before deciding to customize MDB Vue SCSS make sure to install our library with the scss editable mode. You can find a detailed instruction in our Quick start guide

This mode let you write custom scss code, as well as update our scss core files or variables.

Keep in mind that editable styling mode will only work after installing node-sass and sass-loader dependencies. This will be done automatically in basic installation mode. Our CLI plugin will copy all necessary files to the mdb directory and will import them in App.vue file between <style lang="scss"></style> tags, just like in the example:

Guide

After successful installation, your project will contain mdb folder with scss files inside. You will be able to make changes of variables or mixins to both the scss files and the project itself. Below is an example configuration for importing mdb styles.

Free
Pro

App.vue
main.js

        
            
              $image-path: '~@/../mdb/mdbvue/img'; // image path variable update
              @import '~@/../mdb/mdbvue/scss/mdb-free.scss'; // main mdb scss free file
              @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'); // font import

        
            
                import 'mdbvue/lib/mdbvue.css' // light css styles associated only with the Vue library

App.vue
main.js

        
            
              $image-path: '~@/../mdb/mdbvue/img'; // image path variable update
              @import '~@/../mdb/mdbvue/scss/mdb-pro.scss'; // main mdb scss pro file
              @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'); // font import

        
            
                import 'mdbvue/lib/mdbvue.css' // light css styles associated only with the Vue library

Prerequisites
Guide