时间戳

首页 > 解决方案 > 如何访问在 Vue + Buefy 的作用域样式块中创建的 CSS 变量

css - 如何访问在 Vue + Buefy 的作用域样式块中创建的 CSS 变量

问题描述

通过遵循Buefy 文档，我能够自定义我的颜色，甚至创建新的颜色，将其is-[colorName]用作 HTML 元素类。

<style lang="scss">
    // Import Bulma's core
    @import "~bulma/sass/utilities/_all";

    //Create your own colors.
    $download: #253091;
    $download-inverted: findColorInvert($download);

    // Setup $colors to use as bulma classes (e.g. 'is-twitter')
    $colors: (
      "white": ($white, $black),
      "black": ($black, $white),
      "light": ($light, $light-invert),
      "dark": ($dark, $dark-invert),
      "primary": ($primary, $primary-invert),
      "info": ($info, $info-invert),
      "success": ($success, $success-invert),
      "warning": ($warning, $warning-invert),
      "danger": ($danger, $danger-invert),

      "download": ($download, $download-inverted),
    );

    // Import Bulma and Buefy styles
    @import "~bulma";
    @import "~buefy/src/scss/buefy";

    //Custom global styles.    
    #app {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
</style>

现在，在一个页面中，我需要访问一个颜色变量，例如 $download 来创建一个简单的渐变。

<style lang="scss" scoped>
    @import "~bulma/sass/utilities/_all";

    .gradient {
        background-image: linear-gradient($download, #info);
    }
</style>

如何访问另一个 Vue 组件/页面中的变量？

我坚持认为，由于 App.vue 样式块没有作用域，我可以从任何地方访问新创建的变量，但显然我不能。

标签： cssvue.jsvuejs2vue-componentbuefy

解决方案

推荐阅读