Чтобы подключить CSS в Vue.js, есть несколько способов в зависимости от того, как вы работаете с компонентами.
- Глобальное подключение CSS:
Если вы хотите подключить CSS глобально для всех компонентов в приложении, вы можете добавить его в файл main.js:
import Vue from 'vue'
import App from './App.vue'
import './assets/styles/main.css'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
- Подключение CSS для отдельных компонентов:
Для подключения файла CSS только для отдельного компонента вы можете использовать опцию style в файле компонента:
<template>
<div>
<!-- Содержимое компонента -->
</div>
</template>
<style>
@import './assets/styles/main.css'; /* Импорт CSS-файла */
/* Стили компонента */
</style>
- Подключение CSS с помощью модулей:
Вы также можете использовать css-модули в компонентах Vue. Для этого вам нужно установить пакет node-sass и sass-loader:
npm install --save-dev node-sass sass-loader
Затем вы можете создать файл стилей с расширением *.module.scss и использовать его в компоненте следующим образом:
<template>
<div class="example">
<!-- Содержимое компонента -->
</div>
</template>
<style lang="scss" module>
.example {
/* Стили компонента */
}
</style>
Файл стилей будет скомпилирован в уникальное имя класса во избежание конфликтов стилей в других компонентах и CSS-файлах. В компоненте вы можете использовать созданный класс, просто добавив его в атрибут class элемента.
