Buefy tidak mengenali gaya Sass

Question

Pemula... Saya mempunyai aplikasi Vue (2) ringkas dengan nod-sass dan sass-loader dipasang. Ikut arahan di sini.

Buefy diimport ke main.js, ini ialah (separuh bawah) App.vue (saya):

<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>

Jadi saya menjalankan npm runserve - dan apl saya berfungsi dengan baik - tetapi hanya dengan gaya Bulma lalai. Iaitu - jika saya menambah:

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

...kemudian klik "Simpan" - ​​apl akan dimuatkan dengan gaya yang betul. Walau bagaimanapun, jika saya menekan muat semula dalam penyemak imbas, gaya tersuai hilang dan saya kembali kepada gaya Bulma asal. Pada asasnya, saya tidak boleh mendapatkan scss tersuai untuk "melekat".

Saya sudah menggunakannya dalam apl lain dengan (setahu saya) tetapan yang sama! Soalan ini mengganggu saya :-/

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

Tidak pasti apa lagi yang perlu disertakan di sini - tetapi sebarang idea akan sangat dihargai!

Answer 1

Saya rasa masalahnya sebenarnya mungkin anda tidak mempunyai pembolehubah sambungan global.

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

Ini adalah cara saya menggunakan corak yang sama apabila menggunakan 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";'
      }
    }
  }
}