vue.js - 没有页面刷新 Nuxt/Buefy 不加载 CSS

Question

我是 Nuxt js 的新手，我在使用

更改页面时遇到了一些 CSS 问题

如果我使用 then buefy CSS 将一个页面导航到另一个页面，则无法正确加载

如果我刷新页面 ctrl+f5

刷新后，显示正常。我正在使用 Buefy

我的 nuxt.config.js 文件

export default {
  mode: 'universal',
  css: [
      '@/assets/sass/main.sass',
  ],

  modules: [
     '@nuxtjs/pwa',
     ['nuxt-buefy', { 
         defaultIconPack: 'fas',
         css : true
     }],
  ],
}

assets/sass/main.sass

@import '~bulma/sass/utilities/initial-variables'
@import "~bulma/sass/utilities/functions"
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800')

$green: #00C434
$cyan: #5fd9eb 
$yellow: #ffba00

$aquamarine: #38b29f
$facebook: #4267b2
$google: #db4437
$cyan-invert: findColorInvert($cyan)
$aquamarine-invert: findColorInvert($aquamarine)
$facebook-invert: findColorInvert($facebook)
$google-invert: findColorInvert($google)
$info: $cyan
$twitter: #1B95E0
$linkedin: #0077B5
$pinterest: #c8232c
$whatsapp: #4FCE5D

$primary : #00D1B2
$primary-invert: findColorInvert($primary)

$orange: #FF814F
$orange-invert: findColorInvert($orange);

$grey-light-invert: findColorInvert($grey-light);

$family-sans-serif: 'Open Sans', sans-serif;
$family-primary: $family-sans-serif

@import "~bulma/sass/utilities/derived-variables"
$modal-background-background-color : rgba($black, 0.6)

$radius : 5px
$input-focus-border-color : $primary
$input-focus-box-shadow-color: rgba($input-focus-border-color, 0.25)
$breadcrumb-item-color : $grey
$button-border-color : $grey
$input-border-color : $grey
$input-shadow : none
$addColors : ( "orange" : ($orange, $orange-invert), "facebook" : ($facebook, $facebook-invert), "google" : ($google, $google-invert), "aquamarine" : ($aquamarine, $aquamarine-invert), "grey-light" : ($grey-light, $grey-light-invert) )
$colors: map-merge($colors, $addColors);
$size-8: .60rem
$dropdown-item-hover-background-color : rgba($primary, 0.25)
$dropdown-item-active-background-color : $primary
$navbar-item-hover-color : $primary

$tabs-link-active-border-bottom-color : $primary
$tabs-link-active-color : $primary

@import '~bulma/bulma'
@import '~buefy/src/scss/buefy'

$steps-divider-size: .1em
$steps-completed-color: $success
$steps-active-color: $success

我没有找到任何解决方案。任何帮助将不胜感激

Answer 1

另一个选项添加buefy作为插件和ssr true

{ src: '~/plugins/buefy-plugin', ssr: true }