不使用国家预防机制或webpack时，不适用武侠小说主题
我尝试构建一个Vue和Vuetify解决方案(也使用httpVueLoader)来获得Vue的解决方案，但是不需要使用npm或任何类似的东西(只是老式的javascript文件)。我使用简单的登录表单布局来测试设置它们的颜色，但是失败了。
Login.html文件：
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="login">
<login></login>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="lib/httpVueLoader.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<script src="src/login.js"></script>
</body>
</html>Login.js文件
Vue.use(Vuetify, {
theme: {
primary: "#4CAF50",
secondary: "#2E7D32",
accent: "#FF4081",
error: "#f44336",
warning: "#FFA726",
info: "#2196f3",
success: "#4caf50"
}
})
new Vue({
el: '#login',
components: {
'login': httpVueLoader('src/Login.vue')
}
})Login.vue文件
<template>
<v-app>
<v-content>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-card class="elevation-5">
<v-toolbar color="primary">
<v-toolbar-title>Member login</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field prepend-icon="person" name="email" label="email" type="text"></v-text-field>
<v-text-field id="password" prepend-icon="lock" name="password" label="Password" type="password"></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary">Login</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</template>
<script>
module.exports = {
name: 'login',
data: function() {
return {
}
}
}
</script>
<style lang="css">
</style>这将显示正确的页面，但是颜色没有调整(主颜色在我的主题中是绿色的)。有人知道我在这里做错了什么吗？
回答 4
Stack Overflow用户
发布于 2018-06-25 18:46:59
您正在使用Vuetify的css的小型化发行版，传入自定义的主题值将不会产生任何影响。您需要使用手写笔版本并自己构建css文件。
修改手写笔变量的指南使用webpack，所以您需要遵循这一点，或者找到另一种方法将主题编译为css文件。
请参阅修正Stylus变量
Stack Overflow用户
发布于 2019-01-20 05:48:26
和你一样，我是在不使用npm或者webpack的时候遇到这个问题的。通过在主Vue组件的挂载属性中设置它们，我能够让主题重写工作，如下所示：
var app = new Vue({
el: '#app',
watch: {},
mounted: function() {
this.$vuetify.theme.primary = '#1b5632';
this.$vuetify.theme.secondary = '#6AAB84';
},
data: {
domain: 'Sample',
title: 'Login',
username: ''
},
methods: {},
router
})Stack Overflow用户
发布于 2018-09-04 08:20:38
我也有过同样的问题。注意到我应该编辑我使用Vue.use的地方(Vuetify)
如果我在这个之后添加任何东西，它不会受到影响。但是，用参数替换普通的Vue.use(Vuetify)将修复它。
与RTL相同的故事
works
Vue.use(Vuetify, {
rtl: true
})不工作
Vue.use(Vuetify)
Vue.use(Vuetify, {
rtl: true
})https://stackoverflow.com/questions/51029458
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号