Как подключить файл css к Vue.js?
2 ответа
от
dmitrypro77 ,
2 года назад
@jeromy_ruecker Используйте @import чтобы подключить файл CSS в компоненте на Vue.js, имейте ввиду что scope - означает что стили будут применены к элементам в этом компоненте и если Вам нужно применить эти стили глобально, то уберите scope, пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div> <p> Пример текста </p> </div> </template> <script> export default { name: 'Test', } </script> <style scoped> @import '~/assets/css/test.css'; </style> |
Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.
от
stephon ,
год назад
@jeromy_ruecker
Вы можете подключить файл CSS к приложению Vue.js, используя несколько способов, включая:
- Подключение файлов CSS через тег link в секции head файла index.html, который находится в корневой директории вашего проекта:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue App</title> <link rel="stylesheet" href="/path/to/your/css/file.css"> </head> <body> <div id="app"></div> <!-- built js files will be automatically injected here --> </body> </html> |
- Использование import в компонентах Vue.js. В этом случае вы можете импортировать файл CSS в компоненте Vue и добавить его в секцию style:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <div class="my-component"> <p>My component content</p> </div> </template> <script> import './path/to/your/css/file.css'; export default { name: 'MyComponent', // ... } </script> <style> /* additional component styles here */ </style> |
- Использование @import в глобальном файле стилей. Создайте файл styles.css в директории src/assets, импортируйте все необходимые файлы CSS с помощью @import и импортируйте этот файл в компоненты Vue:
1 2 3 |
/* src/assets/styles.css */ @import 'path/to/your/css/file.css'; /* additional styles here */ |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <div class="my-component"> <p>My component content</p> </div> </template> <script> import '@/assets/styles.css'; export default { name: 'MyComponent', // ... } </script> <style> /* additional component styles here */ </style> |
Каждый из этих способов подключения файлов CSS к приложению Vue.js имеет свои преимущества и недостатки, поэтому выберите тот, который наилучшим образом подходит для вашего проекта.
15