vue 配置全局 scss 颜色报错 options has an unknown property 'prependData'. These properties are valid:

在Vue中配置全局SCSS颜色时，错误提示"options has an unknown property 'prependData'"是因为在较新版本的Vue中，`prependData`属性已被弃用。取而代之的是使用`additionalData`属性。下面是更新后的配置方式：

在vue.config.js文件中的`css`选项中添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/styles/variables.scss";`
      }
    }
  }
};

上述代码会将`@/assets/styles/variables.scss`文件导入到全局SCSS中，你可以根据自己的实际需求修改路径。

相关问题

Module build failed (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'plugins'. These properties are valid: object { postcssOptions?, execute?, sourceMap?, implementation? }

这个错误信息告诉我们，PostCSS Loader 初始化时使用了一个不符合 API 模式的选项对象。具体来说，`options` 中有一个未知的属性 `plugins`，而正确的属性是 `postcssOptions`, `execute`, `sourceMap` 和 `implementation`。

要解决这个问题，你需要检查你的 PostCSS Loader 配置，并确保它符合 API 模式。在具体方案上，你可以将 `plugins` 属性更换为 `postcssOptions.plugins`，例如：

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        // your PostCSS plugins here
      ]
    }
  }
}

这样，你就可以在 PostCSS Loader 中使用自定义插件，并且不会再出现这个错误了。

17:13:06.057 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js): 17:13:06.061 ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. 17:13:06.066 - options has an unknown property 'additionalData'. These properties are valid: 17:13:06.066 object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter?, nvue? } 17:13:06.072 at validate (E:\whg\ChuangQi\app\ybgdd-ai\front\node_modules\@dcloudio\vue-cli-plugin-uni\packages\sass-loader\node_modules\schema-utils\dist\validate.js:96:11) 17:13:06.073 at Object.loader (E:\whg\ChuangQi\app\ybgdd-ai\front\node_modules\@dcloudio\vue-cli-plugin-uni\packages\sass-loader\dist\index.js:38:28)怎么解决

你可以尝试修改 Sass Loader 配置，将选项对象中的 additionalData 属性改为 prependData 属性。具体来说，你可以在 vue.config.js 中的 configureWebpack 中添加以下代码：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'vue-style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                prependData: `@import "@/styles/variables.scss";`
              }
            }
          ]
        }
      ]
    }
  }
}

这里假设你的 Sass 文件是以 .scss 后缀名结尾的，如果是 .sass 后缀名，则将 test 对应的正则表达式修改即可。注意，这里的 prependData 选项就是代替了原来的 additionalData 选项，用来指定需要在所有 Sass 文件前引入的代码。