Как определить стили css для vue.компонент js при регистрации этого компонента?

Question

Как определить стили css для vue.компонент js при регистрации этого компонента?

Я могу зарегистрировать обычай vue.компонент js с

// register

Vue.component('my-component', {

  template: '<div class="my-class">A custom component!</div>'

})

Также смотрите https://vuejs.org/v2/guide/components.html

Как я могу включить классы css для моего компонента?

Я ожидал бы чего-то вроде

 Vue.component('my-component', {

      template: '<div class="my-class">A custom component!</div>',

      css: '#... my css stylesheet...'

    })

Но, похоже, не существует варианта css.

Я знаю, что мог бы

A) определить все классы css в глобальной таблице стилей css или

B) используйте компоненты singe-file-vue (потребуется поддержка инструмента сборки *.файлы vue, см. https://vuejs.org/v2/guide/single-file-components.html )

Но я бы предпочел

C) укажите таблицу стилей css для компонента при его регистрации.

=> Как это сделать?

566 2

javascript css vue-component vue.js stylesheet

2 ответов:

Comments

Ничего не найдено.

Roy J · Accepted Answer · 2018-03-01 20:56:56

Там, кажется, нет опции css.

Это верно. Вы не можете делать то, что описываете. Документация по однофайловым компонентам довольно ясно показывает, что одним из преимуществ является то, что вы можете сделать это с ними и не можете сделать это без них.

Во многих проектах Vue глобальные компоненты будут определены с помощью Vue.component, а затем new Vue({ el: '#container' }) для достижения цели a элемент контейнера в теле каждой страницы.

Это может очень хорошо работать для малые и средние проекты, где JavaScript используется только для улучшения некоторых представлений. В более сложных проекты, однако, или когда ваш фронтэнд полностью управляется JavaScript, эти недостатки становятся очевидными:

[...] отсутствие поддержки CSS означает, что в то время как HTML и JavaScript модульно разбитый на компоненты, CSS явно опущен

ken · Accepted Answer · 2018-06-22 17:23:20

Это правда, что вы не можете добавить <style> внутри шаблона Vue или добавить CSS внутри компонент напрямую, если вы не привязываете его или не определяете css глобально. Но вы можете создать пользовательский компонент, который будет динамически делать это за вас. Образец