时间戳

首页 > 解决方案 > Nuxt Js 全局 CSS 与本地 CSS 问题

javascript - Nuxt Js 全局 CSS 与本地 CSS 问题

问题描述

我目前正在使用管理模板开发 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 的全局样式中添加相同的样式表时，它可以工作了！

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

知道我在这里缺少什么吗？干杯。

标签： javascriptcssvuejs2nuxtjs

解决方案

你需要把你的 CSS 放在一个link数组中：

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

https://nuxtjs.org/faq/

推荐阅读