Мне не удалось найти ссылку на него в документации, но Vue, похоже, автоматически удалите теги <style>
в своем шаблоне. Например, если у вас есть компонент в .js
файле, например ...
export default {
template: (
`<section>
<style scoped>
header { color: blue; }
</style>
<header>Hello!</header>
...
</section>`
),
// data, methods, etc.
};
... тогда ваш заголовок не будет синим; стиль исчезнет с предупреждением "Tags with side effect (<script> and <style>) are ignored in client component templates."
Тем не менее, если вы используете .vue
файл и vue cli, вам обычно рекомендуется иметь три раздела - <style scoped>
для вашего CSS, <script>
для вашего JavaScript и <template>
для вашего HTML-шаблона.
Если нет другого (недокументированного?) Способа установить стиль с помощью параметров конфигурации компонента, существуют две разные парадигмы - одна для компонента в js и одна для компонентов vue. Почему это? Есть ли другой способ для пользователей, не использующих vue-cli, добавить стили с компонентной областью в свое приложение vue?
:className="importedClassName"
, см. webpack.js.org/loaders/css-loader/#scope. Вот как это обычно делается в React, medium.com/@0n3z3r0n3/ - person Estus Flask   schedule 13.10.2020