Содержание

1. Работа с CSS стилями в проекте

2. Создание CSS файла

3. Подключение стилей

4. Другие способы подключения

5. Глобальное подключение стилей

Работа с CSS стилями в проекте

Первое, что мы должны понимать: стили CSS по умолчанию хранятся в директории assets. Как правило, там создаётся поддиректория css, в которой мы можем размещать стили, которые будут использоваться на наших страницах.

Создание CSS файла

Итак, создаём директорию css и создаём в ней файл main.css, в котором будут находиться наши стили. Предположим, в этом файле будет только один стиль:

body { color: red; }

Подключение стилей

Теперь мы можем подключить этот стиль к нашему документу различными способами.

Например, мы можем сделать это следующим образом:

Предположим, у нас есть главная страница. В разделе <head>, просто импортируем файл main.css, указав путь до него:

<link rel="stylesheet" href="/css/main.css">

После этого текст на странице станет красным, что подтверждает успешное применение стилей из файла main.css.

Другие способы подключения

Кроме того, этот стиль можно подключить и внутри тега <style>:

<style>
  @import url('/assets/css/main.css');
</style>

Как видите, все работает так же корректно, и стили успешно применяются.

Глобальное подключение стилей

Мы также можем подключить наш файл стилей глобально, то есть ко всем страницам проекта, а не к какому-то конкретному компоненту. Для этого можно открыть файл nuxt.config.js и добавить следующую конструкцию:

module.exports = { css: ['~/assets/css/main.css'] };

В этом случае стили из main.css будут применяться ко всему проекту.