Управление библиотекой компонентов VueJS css
Я создаю библиотеку компонентов VueJS, которая включает vue-element и некоторые другие сторонние библиотеки.
Я включаю свою библиотеку в свой основной проект.
Но мой основной проект содержит те же сторонние библиотеки (vue-element) для некоторых других компонентов форм.
Итак, вопрос в том, как управлять сторонними css. На данный момент я дублирую файлы css vue-element (один раз он включает в основной мой проект, а второй - из моей библиотеки css)
Ответы 1
Вы должны рассматривать vue-element как внешнюю зависимость для вашей библиотеки. Явно укажите это как зависимость. Это означает, что ваша библиотека должна предполагать, что вызывающий проект, то есть главный проект, загрузит CSS до загрузки CSS вашей библиотеки.
Так структурируют CSS в большинстве проектов. Ваш HTML-файл будет примерно таким:
<!-- External CSS -->
<link href = "vue-element/dist/style.css" />
<!-- Library CSS -->
<link href = "path-to-your-library/dist/style.css" />
Но <link href = "path-to-your-library / dist / style.css" /> уже содержит 'vue-element / dist / style.css', поскольку я импортирую его в библиотеку (поскольку я хочу, чтобы библиотека была стабильный, если кто-то хочет использовать его в другом проекте)
В этом-то и дело. CSS вашей библиотеки не должен содержать внешний CSS. Предоставьте вызывающему приложению возможность включить его в свое приложение, если они хотят использовать вашу библиотеку. Представьте, как это происходит в Node.js с peerDependencies.
пожалуйста, поделитесь структурой проекта и сторонним CSS