在Nuxt组件中覆盖布尔玛变量

Question

我尝试$navbar-height通过Nuxt组件中的安装函数来更改的值。到目前为止，除覆盖布尔玛变量外，其他所有东西都在工作

我在Nuxt配置中添加了布尔玛：

modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    // Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
    '@nuxtjs/bulma',
    '@nuxtjs/font-awesome'
  ]

并更改了main.scss文件中的一些变量：

@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/mixins';
@import '~bulma/sass/utilities/functions';

$primary: #3dccc8;
$danger: #dc5222;
$navbar-height: 5rem;
$navbar-item-img-max-height: 3rem;

@import '~bulma/bulma';

该main.scss也得到了加入Nuxt配置

css: [
    { src: '~assets/css/main.scss', lang: 'scss' }
  ],

I now try to manipulate the Variable in a component, but nothing happens.

Here is the function:

mounted() {
    this.$nextTick(function(){
      window.addEventListener("scroll", function(){
        var navbar = document.getElementById("nav")
        var nav_classes = navbar.classList
        if(document.documentElement.scrollTop >= 10) {
          if (nav_classes.contains("shrink") === false) {
            nav_classes.toggle("shrink");
            console.log(nav_classes)
          }
        }
        else {
          if (nav_classes.contains("shrink") === true) {
            nav_classes.toggle("shrink");
          }
        }
      })
    })
  }

Answer 1

我假设motia的答案有效，但是您也可以@nuxtjs/bulma从nuxt.config.js文件中注释掉，将main.scss导入其中：

@import '~bulma/sass/utilities/initial-variables'; @import '~bulma/sass/utilities/functions';

// customize styles

$black: #343434; 
$family-sans-serif: Avenir, sans-serif;

@import '~bulma';

因此，无需卸载nuxt-bulma并重新安装常规的。