Working with bulma sass variables in vue project

To operate with sass variables in vue components you should firstly install node-sass and sass-loader:

yarn add --dev node-sass sass-loader

Then in vue.config.js add follows rules:

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

Now you can write something like this:

<style lang="scss">
body {
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;

  /*all display sizes beginning with tablets*/
  @include from($tablet) {
    display: flex;
 1300   2019   eng