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

@jeromy_ruecker 

There are two ways to connect CSS in Nuxt.js:

1. Add styles to the head section of the Nuxt.js layout file: Create a CSS file (e.g., styles.css) in the assets directory. Open the layouts/default.vue file and add the CSS file to the head section:
2. Use the CSS inside a component: Create a CSS file (e.g., styles.css) in the assets directory. Open a component file (e.g., MyComponent.vue) and import the CSS file using the style tag: The scoped attribute adds a unique identifier to the CSS selectors, scoping the styles to the component only.

Remember to use the correct path for the CSS file when using the ~ shortcut in Nuxt.js.

@jeromy_ruecker 

Вот пример:

1.Добавление стилей в файл макета Nuxt.js:

Создайте файл CSS (например, styles.css) в директории assets. Откройте файл layouts/default.vue и добавьте CSS-файл в раздел head:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<template>
  <div>
    <h1>Welcome to Nuxt.js!</h1>
  </div>
</template>

<script>
export default {
  // Your layout options
}
</script>

<style>
/* Global styles */
@import url('~/assets/styles.css');
</style>

1. Использование CSS внутри компонента:

Создайте файл CSS (например, styles.css) в директории assets. Откройте файл компонента (например, MyComponent.vue) и импортируйте CSS-файл, используя тег style:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<template>
  <div>
    <h2>This is MyComponent</h2>
  </div>
</template>

<script>
export default {
  // Your component options
}
</script>

<style scoped>
/* Scoped styles */
@import url('~/assets/styles.css');
</style>

Перечисленные подходы позволяют подключить CSS в Nuxt.js. Убедитесь, что указываете правильный путь к файлу CSS при использовании сокращения ~ в Nuxt.js.