Как изменить css в библиотеке, которую использует моё приложеине на netlify?

Question

[postya]

Имеется приложение на Vue js.
В приложении я использовал бибилотеку vue toast notification. Так как мне не понравилось как выглядят эти сообщения, я редактировал их css в файлах библиотеки. в папке node_modules я находил папку с библиотекой и там уже искал где находятся эти css селекторы. При разработке на localhost изменения применились и меня все устраивало

Когда я задеплоил приложение на netlify изменения toast notification не смохранились и остались стандартными
Как можно сделать,чтобы изменения в библиотеке приложения также были в продакшене на Netlify?

Команды, которые я выполнял с помощью cli у себя на компьютере:

-npm run build
-npm add.
-npm commit
-netlify build
-netlify deploy --prod

Comments

[Alex]

Редактировать что-то в node_modules плохая идея. Разве только в целях отладки.

Answer 1

[Alex]

• Форкнуть библиотеку, изменить и использовать в проекте
  
• Переопределять свойства библиотеки — собственными
  
• Написать автору библиотеки об возможности кастомизизации
  

Answer 2

[Aetae]

Стили же вручную подключаются, из описания:

import 'vue-toast-notification/dist/theme-default.css';
//import 'vue-toast-notification/dist/theme-sugar.css';

Просто скопируй css в проект, изменяй и подключай напрямую: import './theme-default.css'; или типа того.
Ну элементарная логика же.

А изменения в node_modules в любом случае только локальны, в этом вся суть - не таскать код библиотек с кодом проекта. Если очень надо - можно сделать копию библиотеки и подключить через file:\link:, но это не ваш случай.

Answer 3

[postya]

Благодарю всех за ответы!
Решил задачу следующим способом:
в файле main.js , где я подключал vue toast notification я также подключил глобальный файл для css стилей( global.css)

В этом файле Я могу видеть все классы от библиотеки .В нём я переопределил css селекторы.
Но, из-за того,что файлы библиотеки имеют больший приоритет, то я для каждого переопределенного атрибута добавил флаг !important

Пример:

.notices .toast .toast-icon {
  height: 31px !important;
  width: 31px !important;
  min-width: 31px !important;
}

на Netlify все изменения удачно применились