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.


            $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
          

            $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