作者:清山水妖 | 来源:互联网 | 2022-11-25 17:56
我尝试$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");
}
}
})
})
}
zerohedge..
6
我假设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并重新安装常规的。
1> zerohedge..:
我假设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并重新安装常规的。