Директория assets в Nuxt

Директория assets

Следующая важная директория, которая есть в корневой папке нашего проекта, — это директория assets. По сути, в этой директории у нас тоже хранятся некие статические файлы. Но в отличие от папки public, эти файлы недоступны для публичного доступа и используются внутренними скриптами Nuxt.js.

Эти файлы предназначены для сборки проекта, то есть это некие ресурсы, которые будут обрабатываться системой сборки, и их нельзя напрямую использовать в публичной части проекта.

Пример использования файлов scss

Самым простым примером такого файла может быть файл scss, который нужно компилировать в CSS, чтобы применить стили оформления в проекте. В нашем примере я создал папку в директории assets с названием scss, где находится всего один файл стилей. Этот файл добавляет для элемента body свойство CSS color: red, чтобы текст на странице стал красным.

body {
  color: red;
}

Установка пакетов для работы с scss

Чтобы система сборки могла работать с файлами .sass и .scss, необходимо установить соответствующие пакеты с помощью команды:

Настройка Nuxt.js для работы с scss

После установки пакетов открываем файл nuxt.config.js и указываем путь к нашему файлу .scss, который будет преобразован в CSS. \

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: [
    '~/assets/main.scss',
  ],
})

Если мы запустим проект, то увидим, что стили применились, и текст на странице стал красным.

Заключение

Таким образом, папка assets предназначена для хранения файлов, участвующих в системе сборки проекта, и они не имеют публичного доступа. Аналогичным образом можно настроить и другие типы файлов согласно документации.