vue版本 sass函数报错

Question

sass函数报错

简单写了一串sass计算方法

@use "sass:math";
 
// 默认设计稿的宽度
$Width: 2288;
 
@function vw($px) {
  @return math.div($px, $designWidth) * 100vw;
  // @return ($px / $designWidth) * 100vw;
}

报错SassError: Undefined function.
我以为是版本过高
原先是sass:1.6,sass-loader:10.1.1
现在改成

"sass": "^1.32.12",
"sass-loader": "^8.0.2",


vue.config也添加了
css: {
    loaderOptions: {
    //全局配置utils.scss,详细配置参考vue-cli官网
      sass: {
        prependData: '@import "@/assets/css/utils.scss";',
      },
      less: {
        javascriptEnabled: true,
      },
    },
  },

还是报错SassError: Undefined function.
求各位朋友指点指点，5555555555

Answer 1

你的webpack是哪个版本呢，4和5的写法是不通的哦，

module.exports = {
    style: {
        sass: {
            loaderOptions:{
                data: `@import "~@/variable.scss";`,//webpack4写法
                additionalData: `@import "~@/variable.scss";`//webpack5写法
            }
        }
    }
}

vite的写法是这样的哦

css: {
              preprocessorOptions: {
                scss: {
                    additionalData: `@import "@/variable.scss";`
                }
            }
        }