How to correctly include styles of a module installed via npm?

Question

npm

Hello! Please clarify. I am creating my own WordPress template. I install the package via npm, it contains css or scss styles that I need to rewrite for myself. If I connect them to WP from the node_modules folder and edit css or scss in the node_modules folder, I think that when I update, all my changes will fly off. Is it really more correct to override styles in style.css, and if there are a lot of them? How to be in this situation? I just recently started using npm and gulp, I want to figure it out.

Answer 1

When working with modules that contain scss/less/styl styles, it is desirable to use them.
That is, somewhere we create a vendor.sass file, and in it we import the necessary styles from the installed packages.
If you write without using preprocessors, then you can configure gulp to copy / merge the necessary vendor styles from the node_modules folder into your folder.
In order to override vendor styles, you just need to have a folder in which to put files with vendor names, and make your own overrides for each vendor. Then it's just a matter of putting them together with gulp.
Edit vendor files categorically should not be. If you really need it, you can fork the project and make changes in your fork.