Search code examples
sassmaterializevuejs2vue.js

How to override materializecss sass variables in vue?


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

Solution

  • 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.