Блог

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

vue.config.js

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

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

_ переменные.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?

Это должно сработать в 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