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

Are you using webpack? If yes then you can import your variables before materialize.scss inside an scss file and then import that file in your code. If not what loader or bundler are you using? — Tushar Arora
– Tushar Arora, Commented Feb 28, 2017 at 6:02
@TusharArora Yes, updated question. I tried that earlier but it didn't work. — Traxo
– Traxo, Commented Feb 28, 2017 at 11:22
@Traxo I have posted answer but it would be better if you can post more details like your project directory structure. This will help us to troubleshoot the problem in a better way. — geeksal
– geeksal, Commented Feb 28, 2017 at 18:03
@geeksal Updated Folder structures with folders/files I think might be relevant. If more info is needed just ask. — Traxo
– Traxo, Commented Feb 28, 2017 at 18:15
@Traxo I have updated my answer. Let me know if you have tried it and what was the outcome. Please check whether the files are loaded or not using inspect element. Incorrect file path is one of the most common mistake that we make. — geeksal
– geeksal, Commented Mar 1, 2017 at 13:04

geeksal · Accepted Answer · 2017-03-01 13:08:12Z

6

+50

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.

edited Mar 1, 2017 at 13:08

answered Feb 28, 2017 at 17:46

geeksal

5,0163 gold badges27 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Traxo Over a year ago

Is there a reason that app.scss must be in root, or was that just for example? So far it seems that this approach is working, I'll just take time to test it more before accepting answer.

geeksal Over a year ago

@Traxo No it is not necessary that app.scss must be in root. It is just for example. But as I have already said you that you should always be careful with the paths. So when you move it to other folder make sure that you update paths accordingly in the file. Yeah! you can take your own time to test.

Nati Kamusher · Accepted Answer · 2019-05-09 08:42:01Z

0

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

Define the value for the variable that you want to override (eg. $primary-color)
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

answered May 9, 2019 at 8:42

Nati Kamusher

87111 silver badges15 bronze badges

1 Comment

mfluehr Over a year ago

This answer is close. However, to use the color() function, you can first import it, like this:

@import "../node_modules/materialize-css/sass/components/color-variables"; $primary-color: color("red", "lighten-2"); @import "../node_modules/materialize-css/sass/materialize";

Collectives™ on Stack Overflow

How to override materializecss sass variables in vue?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related