如何使用 vue.js 2.0 更改从 _variables.scss 导入的 Material Design Web 中的变量

如何解决如何使用 vue.js 2.0 更改从 _variables.scss 导入的 Material Design Web 中的变量

我尝试创建一个新文件 _variables.scss，我使用的是 vue 2.0 和 Material Design Web。 我有 app.vue 和 :root 这样的：

:root {
  --mdc-theme-primary: #00add8;
  --mdc-theme-secondary: #00303D;
  --mdc-theme-surface: rgb(221,221,221);
  --mdc-theme-background: yellow;
  --mdc-theme-error: red;
  --mdc-theme-on-primary: rgb(255,255,255);
  --mdc-theme-on-secondary: blue;
  --mdc-theme-on-surface: black;
  --mdc-theme-on-error: whitesmoke;
}

处理一些变量，但并非所有变量都被检测到。 我尝试使用文件 _variables.scss 并像这样：

$mdc-theme-primary: #00add8;
  $mdc-theme-secondary: #00303D;
  $mdc-theme-surface: rgb(221,221);
  $mdc-theme-background: yellow;
  $mdc-theme-error: red;

并在 app.vue 中导入 _variables 但不起作用。 如何在 vue.js 中使用 Material Design Web 创建 _variables.scss？

我的 vue.config.js

 * @type {import('@vue/cli-service').ProjectOptions}
 */

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          includePaths: [
            './node_modules'
          ]
        }
      }
    },sourceMap: true
  },publicPath: '/app/'
}