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?

Answer 1

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.