How implement sass:math into vue.config.js

Question

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?

PJ.Wanderson · Accepted Answer · 2022-02-25 13:31:21Z

1

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";
        `,
      },
    },
  },
};

answered Feb 25, 2022 at 13:31

PJ.Wanderson

1,8621 gold badge12 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How implement sass:math into vue.config.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related