Question

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

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

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并重新安装常规的。

Answer 2

更新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";

然后我将其添加到资产文件夹中，名称为style.scss，您可以选择自己的名称。

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

之后，我安装了sass-loader。

yarn add node-sass sass-loader -D

我在default.vue

中添加了我创建的scss文件。

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

*重新运行以反映更改。

Answer 3

要自定义bulma，请不要使用@nuxtjs/bulma。此程序包会添加标准的预构建buls 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）行是可选的，但您可能需要用它来加载实用程序功能，这些功能可以帮助您计算要自定义的变量。

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

3 个答案: