Невозможно переопределить переменные Bulma с помощью Vue Loader

Я начинаю личный проект с использованием Vue CLI, установил Bulma, так как его можно легко настроить с помощью моих собственных значений переменных. Я попытался внести изменения, чтобы сделать переменные Bulma доступными в моих компонентах Vue:

vue.config.js

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

Это хорошо работает для ссылок на переменные Bulma в компонентах, но теперь есть некоторые начальные значения в глобальных стилях, которые я не могу изменить с помощью пользовательских переменных. Я могу присвоить им значение, и я могу повторно использовать их в том же файле, но они не меняют стили Bulma в целом - это происходит не со всеми переменными, так как я могу без проблем изменять типографические переменные.

_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. Мне нужно переопределить некоторые переменные, но я также хочу использовать те, которые уже определены Bulma.

Что мне здесь не хватает? Почему я не могу переопределить все переменные Bulma?


webpack vue.js sass vue-loader node-sass
person Julián Bonilla    schedule 23.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это должно работать в vue.config.js, если ваш проект построен через vue-cli

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

и предположим, что у вас есть npm install --save-dev node-sass sass-loader

person SC Kim    schedule 23.08.2020
comment
Под _mixins.scss вы имеете в виду файл Bulma? - person Julián Bonilla; 24.08.2020