Переопределить переменные Bulma в компоненте Nuxt
Я пытаюсь изменить значение $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.
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.info(nav_classes)
}
}
else {
if (nav_classes.contains("shrink") === true) {
nav_classes.toggle("shrink");
}
}
})
})
}
Тогда есть какое-нибудь другое решение?
Ответы 3
Для настройки 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) является необязательной, но она, вероятно, понадобится вам для загрузки служебных функций, которые помогут вам вычислить переменные, которые вы хотите настроить.
вы можете закомментировать @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 и переустанавливать обычную.
Обновление 2020
Я взял файл SCSS из https://buefy.org/documentation/customization/.
// Import Bulma's core
@import "~bulma/sass/utilities/_all";
// Set your colors
$primary: #8c67ef;
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);
$primary-invert: findColorInvert($primary);
// There are more other styles and variables here.
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
Затем я добавил его в папку с активами с именем style.scss, вы можете выбрать собственное имя.
Обновите переменные и стили в соответствии с вашими предпочтениями.
После этого я установил sass-loader.
yarn add node-sass sass-loader -D
Я добавил свой созданный файл scss в default.vue
<style lang = "scss">
@import '~assets/style.scss';
</style>
* Повторно запустите, чтобы отразить изменения.
вы не можете перезаписывать переменные sass в среде выполнения javascript, поскольку sass скомпилирован в css