How to override materializecss sass variables in vue?

Question

I'd like to change variables in materialize _variables.scss e.g.

$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
/*...*/

In my Vue 2 main.js I include materialize style like this

require('materialize-css/sass/materialize.scss');

Because of !default I guess I need to include my _variables.scss before including materialize, but I don't know how.

So what's the proper way to set my own variables e.g. $primary-color: color("blue", "lighten-2") (I want to use predefined palette from materialize _colors.scss)?

EDIT 1: I installed vue2 with vue-cli

EDIT 2:

Folder structure:

├── build/
├── config/
├── dist/
├── node_modules/
│    ├── materialize-css
├── src/
│    ├── components
│    ├── router
│    └── main.js
├── package.json
└── index.html

Answer 1

Before changing any default settings in materialized css; first, you need to import the component for which you want to change the settings for. After this you can override the default settings and then you should import materialize. For example if you want to change default color then create a file for example app.scss then write following code:

//please put the paths as per yours project directory structure
@import "materialize-css/sass/components/color";
$primary-color: color("blue", "lighten-2") !default;
@import 'materialize-css/sass/materialize'    

Note: app.css must be included in your page. As per my example app.css must be in your project root folder i.e. at same level as that of index.html

Now you can load app.scss or app.css in Vue 2 as require('../app.scss');

Visit official materialized github repo for viewing complete source.

Answer 2

In matrialize 1.0.0 however, follow these guildlines to override materialize colors:

1. Define the value for the variable that you want to override (eg. $primary-color)
2. Import the materialize.scss library

The definition of the override values must occur before importing the materialize.scss, that means that you can not use the matrial functions such as color()

Example:

// main.scss - the order of the imports is important !!!
@import './_colors';
@import 'materialize-css/sass/materialize.scss';

// _colors.scss
$primary-color: #03a9f4; //light-blue