Custom colours

Storism asked 6 years ago

I have two Vue Projects that I want to share a colour palette

I have created a product-style project, and imported MDBootstrap and Bootstrap.

 "dependencies": {
    "bootstrap": "^4.3.1",
    "mdbvue": "git+https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/vue/vu-pro.git"
  }

I also have created a _main.scss to apply my own colours which my other projects reference

$roboto-font-path: '../../node_modules/mdbvue/build/font/roboto/';
$image-path: '../../node_modules/mdbvue/build/img/';

// Import custom font from Google
@import url('https://fonts.googleapis.com/css?family=Raleway');

/* RGB */
$storism-darkblue: #032445;
$storism-lightblue: #59aeb1;
$storism-lightgrey: #ccdad1;
$storism-grey: #9caea9;
$storism-darkgrey: #788585;

$body-bg: white;
$body-color: $storism-darkblue;

// Override / set color variables
$white: #fff;
$black: #000;
$green: #00fd16;
$blue: $storism-darkblue;
$orange: #fd6c22;
$yellow: #ffd925;
$red: #fd2016;
$pink: #f50057;

// Override fonts
$font-family-sans-serif: 'Raleway',
sans-serif;

@import 'bootstrap/scss/bootstrap.scss';
@import 'mdbvue/build/scss/mdb.scss';

:root has my Blue but it isn't picking up in things like the when I use the Blue class

Am I being daft / missing the point or should I be able to do this


Magdalena Dembna staff premium answered 6 years ago

Hi, Do you have node-sass and sass-loader in your dependencies? In this article you can find step by step instruction for using sass in Vue: https://medium.com/@mahesh.ks/using-sass-scss-in-vue-js-2-d472af0facf9

Kind regards, Magdalena


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: MacBook Pro
  • Browser: Chrome
  • OS: MacOS Mojave
  • Provided sample code: No
  • Provided link: No