如何将 sass:math 实现到 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?

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