无法使用Vue Loader覆盖Bulma变量

问题描述

我正在使用Vue CLI启动一个个人项目，安装了Bulma，因为可以使用我自己的变量值轻松对其进行自定义。我试图进行更改以使Bulma变量在我的Vue组件上可用：

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~bulma/sass/utilities/_all.sass";'
      }
    }
  }
}

这对于引用组件中的布尔玛变量很有效，但是现在我无法使用自定义变量来更改全局样式中的一些初始值。我可以为它们分配一个值，也可以在同一文件中重用它们，但是它们不会整体更改布尔玛样式-尽管并非所有变量都可以更改，因为我可以毫无问题地更改版式变量。

_variables.scss

$purple: #8A4D76;
$middle-blue: #90ddf0;
$primary: $purple; // doesn't work
$link: $middle-blue; // doesn't work
$widescreen-enabled: false;
$fullhd-enabled: false;

$button-text-color: $grey-light; // this does work using $link or $primary

$family-primary: "Exo 2",sans-serif;
$family-secondary: "Metrophobic",sans-serif;
$family-code: "Parisienne",cursive;

index.scss -此文件导入到 App.vue

@import "typography";
@import "variables";
@import "bulma";
@import "styles";

我尝试将_variables.scss文件导入到vue.config.js选项中，并且可以正常工作，但是这样做使我无法访问Bulma预定义变量。我需要覆盖一些变量，但我也想使用布尔玛已经定义的变量。

我在这里想念什么？为什么我不能覆盖所有布尔玛变量？

解决方法

如果您的项目是通过ViewModel

构建的，则这应该在vue.config.js中有效

vue-cli

并假设您有module.exports = { css: { loaderOptions: { sass: { data: ` @import "@/scss/_variables.scss"; @import "@/scss/_mixins.scss"; ` } } } };