如何在vue.config.js中实现sas:math

Question

我在v2.6上使用vue-cli-vue；sass v1.49-并使用简单的除法计算，但我在控制台中收到错误：

弃用警告：在calc((之外使用/for除法已弃用，并将在Dart Sass 2.0.0中删除。

我尝试了一些文档('webpack-contrib:：implementation'；'dev.to:：how to use dart-sass with vue'(，它要求您像这样配置vue.config.js：

module.exports = {
css: {
loaderOptions: {
scss: {
implementation: require("sass"),
},
},
},
};

但没有成功：

语法错误：ValidationError:无效的选项对象。Sass Loader已使用与API不匹配的选项对象初始化架构。

• options.实现应该是一个对象：对象｛…｝->要使用的sass的实现(https://github.com/webpack-contrib/sass-loader#implementation)

那么我如何在Vue-cli中实现sass:Math的使用呢？

Answer 1

经过一段时间的尝试，最简单的解决方案已经实现如下：

module.exports = {
css: {
loaderOptions: {
scss: {
prependData: '@use "sass:math";',
},
},
},
};

当我使用全局变量文件时，最终的设置是这样的：

module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `
@use "sass:math";
@import "~@/assets/scss/src/_variables.scss";
`,
},
},
},
};