[CSS会在没有页面刷新的情况下加载Nuxt / Buefy

问题描述 投票:1回答:1

我是Nuxt js的新手,在使用]更改页面时遇到一些CSS问题>

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

After click on <nuxt-link>

如果我刷新页面ctrl + f5After refresh

刷新后,它显示正确。我正在使用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

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

我是Nuxt js的新手,我在更改页面时遇到了一些CSS问题,如果我使用导航到另一页面,则如果我在刷新ctrl + f5之后刷新buffy CSS将无法正确加载...

vue.js nuxt.js nuxt bulma buefy
1个回答
0
投票

另一个将buefy添加为插件且ssr为true的选项

© www.soinside.com 2019 - 2024. All rights reserved.