NUXTJS |加载CSS时出错/布局第一个调用

Question

我正在作为Nuxtjs的新手。我买了一个html模板将其转换为Nuxtjs项目。模板中，有几个CSS可以显示出一个很好的布局。

第一次加载page.vue时出现问题，但是如果我重新加载它，则布局/ css会正确显示。

我的尝试是：-在nuxt.config.js中将css添加为[...]作为全局。-添加css作为脚本注入page.vue中，如下所示：

export default {
  head () {
    return {
      bodyAttrs: {
        class: [
          'page',
          'header-fixed',
          'no-sidebar',
          'header-style-2',
          'admin-layout'
        ]
      },
      link: [
        { rel: 'stylesheet', type: 'text/css', href: './css/animate.css' },
        { rel: 'stylesheet', type: 'text/css', href: './css/animsition.css' },
        {
          rel: 'stylesheet',
          type: 'text/css',
          href: './css/magnific-popup.css'
        },
        {
          rel: 'stylesheet',
          type: 'text/css',
          href: './css/aurabinary-icons.css'
        },
        { rel: 'stylesheet', type: 'text/css', href: './css/et-line.css' },
        {
          rel: 'stylesheet',
          type: 'text/css',
          href: './css/pe-icon-7-stroke.css'
        },
        { rel: 'stylesheet', type: 'text/css', href: './css/reset.css' },
        { rel: 'stylesheet', type: 'text/css', href: './css/style.css' },
        { rel: 'stylesheet', type: 'text/css', href: './css/shortcodes.css' },
        { rel: 'stylesheet', type: 'text/css', href: './css/custom.css' }
      ],
      script: [
        { src: '/js/plugins.js', body: true },
        { src: '/js/animsition.js', body: true },
        {
          src: 'https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js',
          body: true
        },
        { src: '/js/magnific.popup.min.js', body: true },
        { src: '/js/countto.js', body: true },
        { src: '/js/main.js', body: true },
        { src: '/js/shortcodes.js', body: true }
      ]
    }
  }
}

感谢您的提示和技巧。

Answer 1

1. 将CSS文件放入assets或static文件夹。有关您可以在文档中找到的差异的更多信息：https://nuxtjs.org/guide/assets#static

2. 将其插入nuxt.config.js如下：css: ["~assets/main.css"]或css: ["~/static/static.css"]

3. 重建项目