Vue + Bulma В пользовательском компоненте

Question

Я создаю пользовательский компонент Vue2 + Bulma.Он прекрасно работает сам по себе в своем собственном проекте.Но когда я добавляю его в другой проект, у меня возникают конфликты с переменными SCSS.

Вот сценарий:

• У меня есть компонент в его собственном проекте.Он имеет множество пользовательских SCSS поверх Bulma.
• В компоненте, который я импортирую переменные bulma:

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

• Я использую в своих шаблонах классы типа' is-primary '.В других местах я меняю цвет границ или фона с помощью переменной $ primary.
• В моем основном проекте после импорта компонента он работает нормально, как и ожидалось.
• У меня есть пользовательскийSCSS в основном проекте, в котором я переопределяю переменные Bulma по умолчанию на разные цвета, например: $ primary -> purple.
• Тогда компонент ведет себя так: для всех классов is-primary и подобных классовновый цвет отображается.Для всех правил SCSS, которые я создал с помощью $ primary, все они имеют основной цвет Bulma по умолчанию: $ turquoise.

Это происходит как в сборках dev, так и в prod.Есть идеи, чтобы это исправить?Без необходимости менять все переменные на статические цвета, переопределять правила из основного проекта или использовать общие классы Bulma вместо определенных правил SCSS.

Выпуск цветов Bulma

Спасибо!

Answer 1

Ваша ключевая проблема в том, что ваши переменные SCSS не загружаются в сборках для каждого компонента.Если вы строите с использованием webpack и vue-loader, вероятно, лучшее решение - установить переменные по умолчанию как «глобальный» фрагмент scss, который загружается для каждой компиляции.См. https://vue -loader.vuejs.org / guide / pre-processors.html #aring-global-variable

Если, например, ваши переменные находятся в src/_variables.scss, ваша конфигурация будетвыглядеть примерно так:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: '@import "src/variables.scss";'
      }
    }
  }
}