vue.config.js 配置后 运行项目报错

vue.config.js配置过程中，其配置内容如下

// const path = require("path");
module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === "production" ? "" : "/",
  // 输出文件目录
  outputDir: process.env.NODE_ENV === "production" ? "dist" : "devdist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: process.env.NODE_ENV === "production" ? false : true,
  /**
   * webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
   **/
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = "pagetitle";
      return args;
    });
  },
  // configureWebpack: (config) => {
  // config.resolve = { // 配置解析别名
  //   extensions: ['.js', '.json', '.vue'],
  //   alias: {
  //     '@': path.resolve(__dirname, './src'),
  //     'public': path.resolve(__dirname, './public'),
  //     'components': path.resolve(__dirname, './src/components'),
  //     'common': path.resolve(__dirname, './src/common'),
  //     'api': path.resolve(__dirname, './src/api'),
  //     'views': path.resolve(__dirname, './src/views'),
  //     'data': path.resolve(__dirname, './src/data')
  //   }
  // }
  // },

  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      // 如发现 css.modules 报错，请查看这里：http://www.web-jshtml.cn/#/detailed?id=12
      sass: {
        addtionalData: `@import "@/styles/main.scss";`,
      },
    },
    // 启用 CSS modules for all css / pre-processor files.
    requireModuleExtension: true,
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require("os").cpus().length > 1,
  /**
   *  PWA 插件相关配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
   */
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    open: true, // 编译完成是否打开网页
    // host: "0.0.0.0", // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
    port: 8080, // 访问端口
    https: false, // 编译失败时刷新页面
    hot: true, // 开启热加载
    hotOnly: false,
    proxy: null, // 设置代理
    overlay: {
      // 全屏模式下是否显示脚本错误
      warnings: true,
      errors: true,
    },
    // before: (app) => {},
  },
  /**
   * 第三方插件配置
   */
  pluginOptions: {},
};

有如下报错

观察报错信息可以捕捉到一条：

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 'addtionalData'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

查询官方文档后，发现在css-loaderOptions下有如下提示：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `@import "~@/variables.sass"`
      },
    }
  }

因此将配置文件中的 additionalData 修改为 prependData 编译通过。

官方文档是个好东西啊，得多看看qwq