覆盖 Nuxt 组件中的 Bulma 变量

Posted 2023-02-22

【中文标题】覆盖 Nuxt 组件中的 Bulma 变量

【英文标题】：Override Bulma Variables in Nuxt Component

【发布时间】：2019-05-11 16:07:19

【问题描述】：

我尝试通过 Nuxt 组件中的挂载函数更改 $navbar-height 的值。 到目前为止一切正常，除了覆盖 Bulma 变量

我在 Nuxt 配置中添加了 Bulma：

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.log(nav_classes)
          
        
        else 
          if (nav_classes.contains("shrink") === true) 
            nav_classes.toggle("shrink");
          
        
      )
    )
  

【问题讨论】：

你不能在javascript运行时覆盖sass变量，因为sass被编译成css

那么还有其他解决方案吗？

【参考方案1】：

为了自定义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) 行是可选的，但您可能需要它来加载帮助您计算要自定义的变量的实用函数。

【参考方案2】：

你可以从你的nuxt.config.js文件中注释掉@nuxtjs/bulma，在你可以有的地方导入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 并重新安装常规版本。

【参考方案3】：

2020 年更新

我从https://buefy.org/documentation/customization/获取了SCSS文件。

// 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";

然后我在assets文件夹中添加了名称style.scss你可以选择你自己的名字。

根据您的偏好更新变量和样式。

之后我安装了 sass-loader。

yarn add node-sass sass-loader -D

我在default.vue添加了我创建的scss文件

<style lang="scss">
  @import '~assets/style.scss';
</style>

*重新运行以反映更改。