Nuxt Js глобальный CSS против локальной проблемы CSS

Question

В настоящее время я разрабатываю приложение nuxt с использованием шаблона администратора. Я знаком с vue js, но загрузка ресурсов в части nuxtjs меня немного сбивает с толку. Я конвертирую страницы шаблона администратора в компоненты страницы nuxt. В этом вопросе я расскажу о странице электронной почты (одной из многих страниц с той же проблемой).

На базовой странице администратора загружены различные файлы CSS. Некоторые из них относятся к глобальному уровню, некоторые - к уровню страницы. Я добавил глобальный CSS в файл nuxt.config.js

   /*
   ** Global CSS in nuxt.config.js
   */
  css: [
    // long list of global css files
  ],

И я попытался загрузить CSS уровня страницы вот так.

  // pages/email.vue
export default {
  head: {
    bodyAttrs: {
      class:
        'vertical-layout vertical-menu-modern content-left-sidebar email-application navbar-sticky footer-static',
      'data-open': 'click',
      'data-menu': 'vertical-menu-modern',
      'data-col': 'content-left-sidebar'
    },
    script: [
      { src: '/app-assets/js/scripts/pages/app-email.js' },
      { src: '/app-assets/vendors/js/editors/quill/quill.min.js' }
    ]
  },
  css: ['~/static/app-assets/css/pages/app-email.css'], // this way doesnt work
  middleware: 'auth'
}

Когда я добавляю CSS на уровне страницы, он вообще не работает. Стили не загружаются. Но, как и ожидалось, когда я добавляю ту же таблицу стилей в глобальные стили в nuxt.config.js, ЭТО РАБОТАЕТ!!

   /*
   ** Global CSS in nuxt.config.js
   */
  css: [
    // long list of global css files
    '~/static/app-assets/vendors/css/editors/quill/quill.snow.css', //works like charm
  ],

Есть идеи, что мне здесь не хватает? Ура.

Answer 1

Вам нужно поместить свой CSS в link массив:

link: [
        { rel: 'stylesheet', href: '/path/to/your.css' }
      ]

https://nuxtjs.org/faq/