Vue.js 如果没有页面刷新Nuxt/Buefy，则不会加载CSS

我是Nuxt js新手，在使用更改页面时遇到了一些CSS问题

如果我使用导航将一个页面导航到另一个页面，那么buefy CSS加载不正确

如果我刷新页面ctrl+f5

刷新后，它将正确显示。 我用的是Buefy

我的

numxt.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

我没有找到任何解决办法。

---

任何帮助都将非常感谢

添加buefy作为plugin和ssr true的另一个选项

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

---

另一个选项是将buefy添加为plugin和ssr true

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

---

你用的是sass还是scss？在nuxt.config.js中，css可以是

css:['assets/sass/main']

或

css:['assets/scss/main']

。如果您使用

css:true

配置

numxt-buefy

，则无需

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

。为什么要拆分bulma进口<代码>@import'~bulma'做这些…我用的是sass@ManUtopiKany news这里我有过类似的事情？你用的是sass还是scss让人困惑？在nuxt.config.js中，css可以是

css:['assets/sass/main']

或

css:['assets/scss/main']

。如果您使用

css:true

配置

numxt-buefy

，则无需

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

。为什么要拆分bulma进口<代码>@import'~bulma'做这些…我在用sass@ManUtopiKany news这里我有过类似的事情？