Блог

Я использую an vue-cli-service для создания веб-компонента. Все стили, на которые ссылается этот компонент, всегда встроены в файл javascript.

 vue-cli-service build --target wc --name component-name  --inline-vue  ./src/components/someComponent.vue
 

Есть ли способ заставить Vue извлечь CSS компонента в отдельный файл вместо того, чтобы вставлять его в dist/component-name.js файл?

В качестве альтернативы, существует ли простой способ разрешить внешним пользователям переопределять стили Shadow DOM?

К сожалению, я не верю, что существует автоматический способ сделать это без написания пользовательского плагина webpack. Вам придется перенести CSS вручную.

Если вы используете webpack, вы можете взять все ваши CSS-файлы компонентов и переместить их в отдельный файл.

Оттуда вы можете включить его в свой main.js файл, используя либо a require , либо import :

 import './css/styles.css';
 

Если вы не используете webpack или хотите включать CSS-файлы только в определенные компоненты, вы можете импортировать файл в сам компонент.

Просто создайте <style> блок и импортируйте в него CSS:

 <style>
  @import './css/styles.css';
</style>
 

Вы также можете использовать этот <style> блочный подход в глобальном масштабе, добавив его в свой App.vue файл.