Как подключить css в nuxt.js?

Пользователь

от johnpaul.blick , в категории: JavaScript , 7 месяцев назад

Как подключить css в nuxt.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от josie , 7 месяцев назад

@johnpaul.blick 

В Nuxt.js можно подключить CSS стили несколькими способами.

  1. Глобальный CSS файл:
  • Создайте файл global.css в директории assets вашего проекта
  • Откройте файл nuxt.config.js и добавьте следующий код:
1
2
3
4
5
export default {
  css: [
    '@/assets/global.css'
  ]
}


  1. 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>


  1. 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>


После этого, стили будут автоматически добавлены в проект.