Как правильно подключать стили модуля, установленного через npm?

Question

[WeReng]

Здравствуйте! Проясните пожалуйста. Создаю свой WordPress шаблон. Я устанавливаю пакет через npm, он содержит css или scss стили, которые мне необходимо переписать под себя. Если я их подключу к WP из папки node_modules и буду редактировать css или scss в папке node_modules, думаю, что при обновлении все мои изменения слетят. Неужели правильнее переопределять стили в style.css, а если их очень много? Как быть в этой ситуации? Только недавно начал пользоваться npm и gulp, хочется со всем разобраться.

Answer 1

[D']

При работе с модулями которые содержат scss/less/styl стили желательно использовать именно их.
Т.е у себя где-то создаем файлик vendor.sass, и в нем импортим нужные стили из установленных пакетов.

@import 'node_modules/.../bootstrap.sass'

Если же пишите без использования препроцессоров, то можно настроить gulp для копирования\объединения необходимых вендорных стилей из папки node_modules в вашу папку.

Для того, чтобы переопределять вендорные стили, нужно просто завести у себя папочку в которую класть файлы с именами вендоров, и для каждого вендора делать свои переопределения. Потом их просто собирать вместе с помощью gulp.

Править вендорные файлы категорически не следует. Если сильно нужно, то можно форкнуть проект и делать правки в своем форке.

Comments

[WeReng]

Таким образом, единственный верный вариант это именно переопределять стили, если это sass то импортируем в наш файл и там уже переопределять переменныеи стили? Например у того же bootstrap есть файлик с переменными, мы импортируем бутстрап в файл vendor.scss и там переопределяем переменные? Верно?

[D']

WeReng: да, именно так. Если нужно переопределять ОЧЕНЬ много стилей, то проще форкнуть проект и делать изменения в форке.

[WeReng]

D' Normalization: спасибо за развернутый ответ!