Buefy erkennt keine Sass-Stile

Question

Anfänger... Ich habe eine einfache Vue(2)-Anwendung mit installiertem Node-Sass und Sass-Loader. Folgen Sie den Anweisungen hier.

Buefy wird in main.js importiert, dies ist die (untere Hälfte) von (meinem) App.vue:

<style lang="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);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);

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

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: mergeColorMaps(
    (
        "white": (
            $white,
            $black,
        ),
        "black": (
            $black,
            $white,
        ),
        "light": (
            $light,
            $light-invert,
        ),
        "dark": (
            $dark,
            $dark-invert,
        ),
        "primary": (
            $primary,
            $primary-invert,
            $primary-light,
            $primary-dark,
        ),
        "link": (
            $link,
            $link-invert,
            $link-light,
            $link-dark,
        ),
        "info": (
            $info,
            $info-invert,
            $info-light,
            $info-dark,
        ),
        "success": (
            $success,
            $success-invert,
            $success-light,
            $success-dark,
        ),
        "warning": (
            $warning,
            $warning-invert,
            $warning-light,
            $warning-dark,
        ),
        "danger": (
            $danger,
            $danger-invert,
            $danger-light,
            $danger-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";

</style>

Also führe ich npm runserve aus – und meine App läuft einwandfrei – aber nur mit dem Standard-Bulma-Stil. Das heißt – wenn ich hinzufüge:

<style lang="css">
.somestyle {
 color: red;
}
</style>

...klicken Sie dann auf „Speichern“ – die App wird mit dem richtigen Stil geladen. Wenn ich jedoch im Browser auf „Aktualisieren“ klicke, verschwinden die benutzerdefinierten Stile und ich kehre zum ursprünglichen Bulma-Stil zurück. Grundsätzlich kann ich das benutzerdefinierte SCSS nicht zum „Halten“ bringen.

Ich verwende es bereits in einer anderen App mit (soweit ich weiß) genau den gleichen Einstellungen! Diese Frage beschäftigt mich :-/

"vue": "^2.6.12",
"buefy": "^0.9.4",
"bulma": "^0.9.3",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.0"

Ich bin mir nicht sicher, was ich hier sonst noch einbeziehen soll – aber jede Idee wäre sehr dankbar!

Answer 1

我认为问题实际上可能是您没有全局连接变量。

https://vue-loader.vuejs .org/guide/pre-processors.html#sharing-global-variables

这是我如何将 Bulma 连接到我的 Vue 项目，我认为您可以在连接 Buefy 时使用相同的模式：

// main.ts
import '@/assets/scss/main.scss'

// main.scss file
@import "~bulma";
@import "./_variables.scss";

// _variables.scss file
...all my sass-variables...

@import "~bulma/sass/utilities/_all";

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "~@/assets/scss/_variables.scss";'
      }
    }
  }
}