Materialize CSS - how to keep color modifications separate from NPM module?

Question

I'm using the npm module of materialize-css (0.100-2) in an electron application. Npm modules are not tracked in git. I have made changes to the SASS components, specifically these files:

node_modules/
+-- materialize-css/
    +-- sass/
        materialize.scss    <-- changes
        +-- components/
            ...
            _color.scss     <-- changes
            _variables.scss <-- changes
            _palette.css    <-- new file I added

I've compiled the new materialize.css in node_modules/materialize-css/dist/css using the instructions found here: http://materializecss.com/getting-started.html and everything works well.

However, I'm planning to upgrade to 1.0.0-beta and need to keep my modifications in git. Any ideas or best practices on how to keep my modifications separate from the SASS files but still include them when compiling the CSS?

Yefferson Marín · Accepted Answer · 2018-04-25 00:01:58Z

2

You should not change directly your node_modules files, instead of that you should define another file in your project root, for example: app.scss

/
  ...
  node_modules/
  ...
  app.css
  package.json

As it is shown right here: http://materializecss.com/sass.html, you can now change your pallete and so, in your app.scss file:

// Import materialize-css
@import "~materialize-css/sass/materialize";

$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: false !default;
$primary-color-dark: false !default;
@if not $primary-color-light {
  $primary-color-light: lighten($primary-color, 15%);
}
@if not $primary-color-dark {
  $primary-color-dark: darken($primary-color, 15%);
}
$secondary-color: color("teal", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;

$link-color: color("light-blue", "darken-1") !default;

/*** More variables not shown here.. ***/

Note You will need to add a sass compiler.

answered Apr 25, 2018 at 0:01

Yefferson Marín

562 bronze badges

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

3 Comments

jfix Over a year ago

Yefferson Marín: Thanks for your help but it doesn't seem to work. :-( Here's a gist with my customisation per your answer: gist.github.com/jfix/b0bb5bf2ff1d7a38824e5bd5171102e5 The SASS compilation works fine, but in the end I still get the official red and green. :-( Thanks for your continued help!

Yefferson Marín Over a year ago

Refere to this gist to see the proper way to do it.

jfix Over a year ago

Thanks Yefferson Marín! As discussed on Gitter.im, I finally decided to go the way of not using the npm module, but to include the SASS and CSS files in my code base, as described here: medium.com/@mancebo128/… Thanks again for your help and patience!

Collectives™ on Stack Overflow

Materialize CSS - how to keep color modifications separate from NPM module?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related