Как подключить css в nuxt.js?
1 ответ
от
josie ,
7 месяцев назад
@johnpaul.blick
В Nuxt.js можно подключить CSS стили несколькими способами.
- Глобальный CSS файл:
- Создайте файл global.css в директории assets вашего проекта
- Откройте файл nuxt.config.js и добавьте следующий код:
1 2 3 4 5 |
export default { css: [ '@/assets/global.css' ] } |
- CSS модули:
- Создайте файл example.module.css в директории компонента components
- В файле компонента импортируйте CSS модуль:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template>
<div class="example">Example component</div>
</template>
<script>
import styles from '~/components/example.module.css'
export default {
name: 'ExampleComponent',
data() {
return {
styles
}
}
}
</script>
<style module>
.example {
color: red;
}
</style>
|
- SCSS:
- Установите node-sass и sass-loader пакеты командой npm install node-sass sass-loader --save-dev
- Создайте файл example.scss в директории компонента components
- В файле компонента импортируйте SCSS файл:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template>
<div class="example">Example component</div>
</template>
<script>
import '~/components/example.scss'
export default {
name: 'ExampleComponent'
}
</script>
<style lang="scss">
.example {
color: red;
}
</style>
|
После этого, стили будут автоматически добавлены в проект.
15