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">
html,
body {
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;

  /*all display sizes beginning with tablets*/
  @include from($tablet) {
    display: flex;
  }
}
</style>
Share
Send
1 y   eng