6

我通过将以下内容添加到我的 index.js 文件中来使用 Vue Material default-dark 主题...

// 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";

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

在此处输入图像描述

我错过了什么?

4

2 回答 2

3

我得到了它...

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

    @import "~vue-material/dist/theme/engine";
    
    @include md-register-theme("default", (
      primary: md-get-palette-color(green, A200), // The primary color of your application
      accent: md-get-palette-color(red, A200), // The accent or secondary color
      theme: dark // This can be dark or light
    ));
    
    @import "~vue-material/dist/theme/all";
    
于 2018-06-11T17:57:40.210 回答
1

你的主要组件是什么样的?

您是否在 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">
于 2018-06-11T08:47:51.587 回答