如何更改Vue材质主题的颜色

Question

我正在使用Vue材质默认-暗主题，将以下内容添加到我的index.js文件中...

// index.js Where the vue instance is instantiated

import 'vue-material/dist/theme/default-dark.css';
...
import Vue from "vue";
...
Vue.use(VueRouter);
const routes = [
    {
        path: '/',
        component: Viewport,
        ...
    }
]
...
window.app.$mount('#jg-app');

这个效果很好，但是现在我想改变主题的颜色。为此，我在我的模板中添加了以下内容...

// viewport/Viewport.vue

<styles src="./Viewport.scss" lang="scss"></styles> 

在Viewport.scss中(根据文档)...

# viewport/Viewport.scss

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default-dark", (
  primary: md-get-palette-color(green, A200), // The primary color of your application
  accent: md-get-palette-color(yellow, A200) // The accent or secondary color
));

@import "~vue-material/dist/theme/all";

但是当我构建的时候，颜色并没有像我期望的那样改变。我看到该元素被标记为主元素，但它仍然显示为蓝色。

​

​

我遗漏了什么？

Answer 1

我知道了..。

1. 已将导入的
2. 已更新的sass删除为以下内容...

@import "~vue-material/dist/theme/engine"；@include md-register-theme(“默认”，( primary: md-get-palette- color (绿色，A200)，//您的应用程序的主色:md-get-palette- color (红色，A200)，//重音或辅色主题:深色//这可以是深色或浅色))；@import "~vue-material/dist/theme/all";

Answer 2

你的主要组件是什么样子的？

您是否在vue-material组件md-theme="default-dark“中的某处使用了该组件？

<template>
  <div class="page-container">
    <md-app md-theme="default-dark">
      <md-app-toolbar class="md-primary">
        <span class="md-title">My Title</span>
      </md-app-toolbar>
    ....
    </md-app>
  </div>
</template>

否则，您只需将其添加到如下所示的部件：

<md-content md-theme="default-dark">