I am using vue-cli - Vue on v2.6; sass v1.49 - and using simple division calculations, but I follow receiving errors in the console:
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
I tried some documentations ('webpack-contrib::implementation'; 'dev.to::how to use dart-sass with vue'), which asks you to configure vue.config.js like this:
module.exports = {
css: {
loaderOptions: {
scss: {
implementation: require("sass"),
},
},
},
};
But without success:
Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options.implementation should be an object: object { … } -> The implementation of the sass to be used (https://github.com/webpack-contrib/sass-loader#implementation).
So how do I implement the use of sass: Math in Vue-cli?
After some time trying some solutions, the easiest has been implemented like this:
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: '@use "sass:math";',
},
},
},
};
As I use a global variable file, the final setup was like this:
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `
@use "sass:math";
@import "~@/assets/scss/src/_variables.scss";
`,
},
},
},
};