Переопределить переменные Bulma в компоненте Nuxt - PullRequest
Новая
       29

Переопределить переменные Bulma в компоненте Nuxt

0 голосов
/ 10 декабря 2018

Я пытаюсь изменить значение $navbar-height через смонтированную функцию в компоненте Nuxt.Пока все работает, кроме переопределения переменных Bulma

Я добавил Bulma в конфиге 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 Config 

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

Теперь я пытаюсь манипулировать переменной в компоненте, но ничего не происходит.

Вот функция: 

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");
          }
        }
      })
    })
  }

Ответы [ 2 ]

0 голосов
/ 30 марта 2019

Я предполагаю, что ответ 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 и переустанови штатную.

0 голосов
/ 16 декабря 2018

Для настройки bulma вам не следует использовать @nuxtjs/bulma. Этот пакет добавляет стандартную готовую bulma css.

Решение состоит в том, чтобы создать bulma внутри вашего проекта.

Сначала установитеПакеты node-sass и sass-loader npm install sass-loader node-sass webpack --save-dev

Затем добавьте следующую запись в nuxt.config.js: css: [{src: '@/assets/sass/app.sass', lang: 'sass' }],

В assets/sass/app.sass вы добавите следующее 

@import "~bulma/sass/utilities/_all"; // -- (1)
$navbar-height: 40px // you can customize the variable here
@import "~bulma"; // then you load bulma

Строка (1) является необязательной, но вам, вероятно, она понадобится для загрузки служебных функций, которые помогут вам вычислить переменные, которые вы хотите настроить.

...