Estoy usando vue-cli - Vue en v2.6; sass v1.49 - y usando cálculos de división simples, pero sigo recibiendo errores en la consola:
Advertencia de desuso: el uso de / para la división fuera de calc() está en desuso y se eliminará en Dart Sass 2.0.0.
Probé algunas documentaciones ( 'webpack-contrib::implementation' ; 'dev.to::how to use dart-sass with vue' ), que le pide que configure vue.config.js así:
module.exports = { css: { loaderOptions: { scss: { implementation: require("sass"), }, }, }, };Pero sin éxito:
Error de sintaxis: ValidationError: objeto de opciones no válido. Sass Loader se ha inicializado utilizando un objeto de opciones que no coincide con el esquema de la API.
- options.implementation debe ser un objeto: objeto {...} -> La implementación del sass que se usará ( https://github.com/webpack-contrib/sass-loader#implementation ).
Entonces, ¿cómo implemento el uso de sass: Math en Vue-cli?
Después de un tiempo probando algunas soluciones, la más fácil se implementó así:
module.exports = { css: { loaderOptions: { scss: { prependData: '@use "sass:math";', }, }, }, };Como uso un archivo de variable global, la configuración final fue así:
module.exports = { css: { loaderOptions: { scss: { prependData: ` @use "sass:math"; @import "~@/assets/scss/src/_variables.scss"; `, }, }, }, };