css - 在 buefy 和 bulma 中设置 $primary color 时出现问题

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”，
• 导入 bool 玛

在 SCSS 文件中，我为 buefy 和 bulma 设置了颜色变量，如 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文件，其中head中的第一个文件是保存我在$primary中所做的更改的文件。最后一个是我找到 buefy $primary color 的默认值的地方。

Answer 1

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