vue cli3及4使用官方方法配置scss全局变量报错

in ./src/App.vue?vue&type=style&index=0&lang=scss

Module build failed (from ./node_modules/_sass-loader@10.0.5@sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'data'. These properties are valid:
object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }
at validate (C:\Users\Administrator\Desktop\blog\node_modules\_schema-utils@3.0.0@schema-utils\dist\validate.js:104:11)
at Object.loader (C:\Users\Administrator\Desktop\blog\node_modules\_sass-loader@10.0.5@sass-loader\dist\index.js:30:29)

具体应该是 sass-loader 版本问题

我现在是 sass-loader 10 版本

之后改为了

 css: {
        loaderOptions: {
            sass: {
                additionalData: `@import "@/assets/style/variables.scss";`
            }
        }
    }

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "path/to/your-theme.scss";`
        // sass 版本 9 中使用 additionalData 版本 8 中使用 prependData
      }
    }
  },
  ...
}

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "path/to/your-theme.scss";`
        // sass 版本 9 中使用 additionalData 版本 8 中使用 prependData
      }
    }
  },
  ...
}

其他

css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/assets/scss/variables.scss";`, //这儿的键名改了 data
      },
    }
  }