使用 bulma 在 buefy 中设置 $primary 颜色的问题

Question

vue2中buify bulma问题

我无法使用 buify / bulma 设置 $primary color。

问题似乎是更改最终出现在生成的 css 文件中 默认颜色为紫色#7957d5 我已将变量 $ primary 设置为粉色 #3e912ba

对于完全相同的元素，它会生成几种不同的颜色，其中标准在第 14617 行，最小变化为 12241 见蓝色箭头 ->

整个设置是：

• VUE 2“vue”：“^2.6.11”，
• SASS DART “sass”：“^1.26.5”，“sass-loader”：“^8.0.2”，
• Buefy “buefy”：“^0.9.10”，
• 进口布尔玛

在 SCSS 文件中，我使用 bulma 为 buefy 设置颜色变量，如 the offical doc

    @import '~bulma/sass/utilities/all';
// Set your colors
$primary: #e912ba;
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);

// Lists and maps
$custom-colors: $primary;
$custom-shades: null !default;

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: mergeColorMaps(
    (
        "primary": (
            $primary,
            $primary-invert,
            $primary-light,
            $primary-dark,
        ),
      
    ),
    $custom-colors
);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

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

在 app.vue 我导入 scss

<style lang="scss">
@import "./css/style.scss";
</style>

生成了三个不同的 css 文件，其中头中的第一个是保存我在 $primary 中所做的更改的文件。最后一个是我找到 buefy $primary color 的默认值的地方。

Answer 1

原来问题是我在main.js文件中导入了buefy.css import 'buefy/dist/buefy.css' 当我删除它时它起作用了。