Keeping Materialize CSS color changes distinct from the NPM module: best practices

In my electron application, I am utilizing the npm module materialize-css (version 0.100-2). Since npm modules are not git-tracked, I have made changes to the SASS components within the following files:

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

Following the instructions provided at , I have successfully compiled the updated materialize.css in 

node_modules/materialize-css/dist/css
.

As I plan to upgrade to version 1.0.0-beta and want to maintain my modifications within git, I am seeking advice or best practices on how to keep my changes separate from the original SASS files while still incorporating them during the CSS compilation process.

cssnpmsassmaterialize

Answer №1

It's important not to directly modify your node_modules files. Instead, create a new file in the root of your project, such as: app.scss


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

Referencing this example from , you can customize your colors and more in the 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: Make sure to use a sass compiler.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that the buttons are arranged in a single row and have horizontal overflow in the mobile version

After using Bootstrap, I managed to create a row with multiple buttons. I encountered an issue where the buttons do not align properly when viewed on mobile devices, as depicted in the image provided. Is there a solution to ensure that these buttons alwa ...

htmlcsstwitter-bootstrapbootstrap-4responsive-design

Tips for Improving the Naming Conventions of CSS Modules

I currently have the following setup in my webpack.config.js: { test: /\.css$/, use: [ {loader: "style-loader"}, { loader: "css-loader", options: { modules: true, importLoaders: 1, s ...

csswebpackcss-modules

Tips for making a background image responsive using ng-style in AngularJS

Can anyone assist me in fixing the gap space issue in a responsive view with an attached jpg background image? Follow this link for more details: enter image description here ...

angularjshtmlcssbackground

Is it possible to encounter duplicate modules in the package-lock.json file while using npm?

There seems to be a duplication issue with node 15 and npm 7 when switching from node 14. One package, apollo-server-core, has two entries - one under its normal name and another under node_modules/apollo-server-core. This additional entry was created duri ...

node.jsnpm

Altering the appearance of an Angular component in real-time by applying various CSS style sheets

I'm currently working on implementing a dynamic style-sheet change for a single-page application using Angular. The concept is to offer users the ability to select from various themes through a dedicated menu. Although only two theme variants are show ...

cssangulardynamicstyles

Placing an image in context with the background image

Looking for guidance on CSS styling. I have successfully set up a responsive background image on my page and now want to add a circular logo positioned at the bottom center of it. However, I am facing an issue where the logo's position changes when th ...

htmlcss

Analyzing the different NodeJS drivers and modules available for connecting to SQL databases

We have a new nodejs project in the works, but we're faced with the task of selecting modules and drivers to integrate with our existing MS SQL database. Researching and comparing all the available tools can be quite tedious, especially when trying to ...

sql-servernode.jsnpm

Error message: "Command Not Found" when running npm on Heroku

After reading through this question, I attempted to execute the recommended solution (heroku run npm run "script name"), only to encounter the error message "bash: npm: command not found". My objective is to activate the script for a deployed meteor NodeJS ...

node.jsmeteorherokunpm

Anchors that need to be clicked multiple times before activating

'I recently encountered a strange bug. My CSS3 anchors/buttons, which I have been simplifying by removing properties, sometimes require multiple clicks to function. This is completely new to me and quite perplexing. The issue seems to occur randomly, ...

htmlcss

Encountering Issues with Gatsby Build Due to Mozjpeg

Since yesterday, I've been facing issues deploying my Gatsby site to our server due to a problem with the mozjpeg library. Has anyone else run into this error before? I've attempted: locking gatsby-cli installing the automake linux package inst ...

node.jslinuxdockernpmgatsby

Issues with executing commands in package.json

I've encountered an issue while attempting to execute some commands I wrote in my package.json file to test environment variables. When trying to run them in the Node.js command prompt, it throws me an error. This is how my package.json file is struc ...

node.jsnpmpackage.json

Verify the presence of npm package dependencies listed in package.json without requiring an internet connection

Is there a way for npm to inform me if all dependencies are already installed without requiring a network check? My objective is to initially verify locally if any dependencies need to be installed. If anything is missing, I will then execute a standard n ...

npmnpm-install

Impeccable method to safeguard element from external css interference

Currently, I am working on a script that will be utilized across various pages and I want to ensure that the elements it generates are not affected by the CSS styles of those pages. Some individuals suggest using CSS like this: body>*{min-height:200px; ...

cssinheritance

Implement an innovative solution to automatically close the navbar component in tailwindcss on

I've been attempting to create a unique tailwind navbar component for React, but I've encountered issues when trying to make it close on scroll for mobile view. I found the initial code on this website. After that, I tried implementing the code ...

htmlcssreactjstailwind-css

Adjust the position of an image in both the x and y axes based on the mouse hover location using jQuery

I am attempting to develop a unique interactive experience where an image placed within a container extends beyond its boundaries. The concept involves moving the image in the opposite direction of my mouse as I hover over the container. The speed and inte ...

jquerycssjquery-pluginshover

Is there a way to move the submit form button to the next line using CSS?

I am having trouble centering the submit button below two input fields in a simple React form. Can anyone offer assistance with this? HTML .SearchBar-fields { display: flex; justify-content: center; margin-bottom: 2.88rem; flex-direction: row; ...

htmlcssreactjs

CSS magic: Text animation letter by letter

I have a <div> with text. <div> to be revealed on the page one character at a time:</p> <div>, the animation should stop and display the full text instantly.</p> In summary, I aim to replicate an effect commonly seen in Jap ...

javascripthtmlcssanimation

Include the node's directory in the package.json file

I am currently using Plesk and CentOS as my hosting platform. The folder where my npm and node binaries are located is quite specific: /opt/plesk/node/9/bin Whenever I attempt to run /opt/plesk/node/9/bin/npm install, I encounter the following error messa ...

node.jsnpm

Encountering an issue with npm installation following a recent node version upgrade

Having trouble installing Sass on Node version v16.14.0. I keep receiving this error message: https://i.stack.imgur.com/6KNcF.png ...

cssnode.jsreactjsnpmsass

How can I activate the fancy box from a specific div element?

There are plenty of variations to this question, but none of them seem to help. I am looking for a way to trigger fancybox from a div. Here is the div in question: <div class="port web">Website</div> This particular div has some CSS styles ap ...

jqueryhtmlcssfancybox