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>