Nuxt Js 全局 CSS 与本地 CSS 问题

Question

我目前正在使用管理模板开发 nuxt 应用程序。我熟悉 vue js，但 nuxtjs 部分中的加载资产让我有点困惑。我正在将管理模板页面转换为 nuxt 页面组件。我将在这个问题中讨论电子邮件页面（具有相同问题的许多页面之一）。

基本管理页面加载了各种 CSS 文件。有些是全局级别，有些是页面级别。我在 nuxt.config.js 文件

中添加了全局 CSS

   /*
   ** 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 的全局样式中添加相同的样式 sheet 时，它起作用了！！

   /*
   ** 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/

Nuxt Js 全局 CSS 与本地 CSS 问题

Nuxt Js global CSS vs Local CSS issue

javascript

css

vuejs2

nuxtjs